Yastıklı alt öğe üst öğesinin taşmasını nasıl önler?

Question

this example'dan da görebileceğiniz gibi, input, üst div "taşması" gibi görünüyor. Ebeveynini taşmasına gerek kalmadan input'a dolgu eklemek istiyorum.

Her tarayıcı için en iyi çözümü/çözümü (IE, Firefox, Chrome vb. Dahil) bilmek istiyorum.

Answer 1

Sen this answer görebilirsiniz ama eğer beğenmezseniz' böyle t, böyle box-sizing CSS3 özelliği kullanabilirsiniz:

input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Live jsFiddle example

Answer 2

İç alanın genişliğini 100% olarak belirtmeyin. Bir div, ebeveyn kabının genişliğine otomatik olarak sığar. giriş div içinde olduğunu ancak sol üst köşesinde yer almaktadır gibi Demo

Answer 3

görünüyor. Giriş, div genişliğinin% 100'ünü aldığından, div'un kırmızı arka planını engeller. Div daha uzun olduğundan, girişin üstte olduğu gibi görünmesini sağlayarak tabana yapışır. Aşağıdakileri yapın:

• dış div değil giriş kutusu ait CSS dolgu uygulayın.
  İsterseniz girdiye bir kenar boşluğu uygulayabilirsiniz, ancak sanırım doldurma bölmesini içeren dolgu daha iyidir.
  • div (<% 100)

Answer 4

doldurma için nesnesinin genişliği ekler daha giriş kutusu az geniş olun. Bir seçenek, sol/sağ dolguyu girişten kaldırmak ve sadece sağ dolguyu kaldırmasına rağmen sadece metin girintisini kullanmak olacaktır.

.inside{ 
    background: blue; 
    border: none; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    text-indent: 10px; 
    width: 100%; 
} 

Alternatif bunun yerine, yüzdeler kullanabilir ve genişliği o değerini çıkarmak olabilir senin dolgu için kodlanmış piksel genişlikleri kullanmanın:

.inside{ 
    padding: 3%; 
    width: 94%; 
}