Jak mogę zapobiec właściwość wypełniania zmianę szerokości lub wysokości w CSS?

głosy
184

Tworzę strony z DIVs. Wszystko działa z wyjątkiem sytuacji, gdy tworzę DIV. Tworzę je następująco (przykład):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

Kiedy dodać padding-leftwłaściwość, szerokość DIVzmian 220px, i chcę go do pozostania na 200px.

Powiedzmy, że tworzę kolejny DIVnazwany anotherdivtak samo jak newdivi umieścić go w środku newdiv, ale newdivnie ma wyściółkę i anotherdivma padding-left: 20px. Mam to samo, newdivnic nie będzie szerokość 220px.

Jak mogę rozwiązać ten problem?

Utwórz 22/04/2009 o 21:00
źródło użytkownik
W innych językach...                            


7 odpowiedzi

głosy
38

Umieść div w newdiv z width: autoimargin-left: 20px

Wyjąć wyściółkę z newdiv.

Strona modelu W3 Box ma dobre informacje.

Odpowiedział 22/04/2009 o 21:07
źródło użytkownik

głosy
1

kiedy dodać właściwość padding-left, szerokość zmian div 220px

Tak, to jest dokładnie to, zgodnie z normami. To jak to ma działać.

Powiedzmy, że tworzę innego div o nazwie anotherdiv dokładnie taki sam jak newdiv, i umieścić go wewnątrz newdiv ale newdiv ma wyściółkę i anotherdiv ma padding-left: 20px. Mam to samo, szerokość newdiv będzie 220px;

Nie, newdiv pozostanie 200px szerokości.

Odpowiedział 22/04/2009 o 21:30
źródło użytkownik

głosy
0

po prostu zmienić szerokość div do 160px jeśli masz dopełnienie 20px dodaje 40px extra szerokości swojej div więc trzeba odjąć 40 pikseli od szerokości, aby utrzymać div patrząc normalne i nie zniekształcony z dodatkowym szerokości na nim i tekst wszystko pomieszane.

Odpowiedział 14/04/2012 o 17:32
źródło użytkownik

głosy
325

Dodaj właściwość:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Uwaga: To nie będzie działać w programie Internet Explorer w wersji 8 poniżej.

Odpowiedział 20/08/2012 o 07:58
źródło użytkownik

głosy
9

Jeśli chcesz, aby wciąć tekst w div bez zmieniania rozmiaru div użyć CSS text-indentzamiast padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

Odpowiedział 15/01/2015 o 00:28
źródło użytkownik

głosy
18

Spróbuj tego

box-sizing: border-box;
Odpowiedział 10/09/2015 o 11:46
źródło użytkownik

głosy
2

wystarczy dodać box-sizing: border-box;

Odpowiedział 24/06/2017 o 02:19
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more