Dlaczego dopełnienie CSS zwiększa rozmiar elementu?

Próbuję nadać mojemu div i textarea trochę dopełnienia. Kiedy to robię, zwiększa rozmiar elementu, zamiast zmniejszać obszar zawartości w nim. Czy jest jakiś sposób, aby osiągnąć to, co próbuję zrobić?

Możesz dodać box-sizing:border-boxelement kontenera, aby móc określić szerokość i wysokość, które nie zmieniają się po dodaniu dopełnienia i / lub obramowania do elementu.

Specyfikacje można znaleźć tutaj (MDN) .

Zaktualizuj (skopiowano komentarz do odpowiedzi)

Obecnie wartość border-boxjest obsługiwana we wszystkich głównych przeglądarkach, zgodnie ze specyfikacjami MDN

Niektóre przeglądarki wymagają oczywiście odpowiedniego przedrostka tj. -webkitI -mozjak widać tutaj wyraźnie

Zgodnie ze specyfikacją CSS2 , renderowana szerokość elementu typu box jest równa sumie jego szerokości, lewego / prawego obramowania i lewego / prawego dopełnienia (w grę wchodzi również lewy / prawy margines). Jeśli twoje pudełko ma szerokość „100%”, a także ma margines, obramowanie i wypełnienie, wpłyną one (zwiększą) szerokość zajmowaną przez obiekt.

Tak więc, jeśli twój obszar tekstowy musi mieć 100% szerokości, przypisz wartości do width, margin-left / right, border-left / right i padding-left / right w taki sposób, aby ich suma była równa 100%.

W CSS3 mamy trzy modele rozmiarów pudełek . Możesz użyć border-boxmodelu:

Określona szerokość i wysokość (oraz odpowiednie właściwości min / max) tego elementu określają ramkę graniczną elementu. Oznacza to, że każde wypełnienie lub obramowanie określone w elemencie jest układane i rysowane wewnątrz określonej szerokości i wysokości. Szerokość i wysokość zawartości są obliczane poprzez odjęcie szerokości obramowania i wypełnienia odpowiednich boków od określonych właściwości „width” i „height”.

To był bałagan w części W3C i różne przeglądarki tylko dodały do ​​tej złożoności swoje własne wersje modeli pudełkowych. Osobiście, zamiast zastanawiać się, która przeglądarka lub ustawienie CSS załatwi sprawę, po prostu zawijam zawartość pudełka w kolejną instrukcję DIV i używam marginesów w tym DIV, zamiast używać dopełnienia, na przykład:

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

Chociaż działa to tylko w przypadku kontenerów o stałym rozmiarze

To zależy od przeglądarki i implementacji modelu pudełkowego . To, czego doświadczasz, to prawidłowe zachowanie.

IE tradycyjnie źle to rozumiał: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Aby uzyskać lepsze rozwiązanie w różnych przeglądarkach, możesz uniknąć tego zachowania, opakowując dowolny tag, który wymaga wypełnienia, w inny tag o stałej szerokości i nadając mu szerokość: auto. W ten sposób, jeśli rodzic ma szerokość x i dodasz dopełnienie do dziecka, dziecko odziedziczy pełną szerokość x, stosując wypełnienie poprawnie bez modyfikowania szerokości rodzica lub własnej.

Element div domyślnie przyjmuje szerokość swojego kontenera nadrzędnego, więc aby uniknąć problemów ze zgodnością przeglądarki, możesz dodać podrzędny element div w określonym elemencie div, a następnie dodać wymagane wypełnienie do podrzędnego elementu div .

Uwaga - nie określaj szerokości podrzędnego elementu div, ponieważ zwiększyłby się, gdyby dodasz dopełnienie