Чому відступ CSS збільшує розмір елемента?

Я намагаюся надати моєму div і textarea деяку підкладку. Коли я це роблю, це збільшує розмір елемента, замість того, щоб зменшувати область вмісту всередині нього. Чи є спосіб досягти того, що я намагаюся зробити?

Ви можете додати box-sizing:border-boxдо елемента-контейнера, щоб мати можливість вказати ширину та висоту, які не змінюватимуться, коли ви додаєте до елемента заповнення та / або межу.

Специфікації див. Тут (MDN) .

Оновити (скопійований коментар для відповіді)

На даний момент значення border-boxпідтримується у всіх основних браузерах, відповідно до специфікацій MDN

Деякі браузери , звичайно , вимагає належного префікса тобто -webkitі -mozяк ви можете чітко бачити тут

Відповідно до специфікацій CSS2 , відтворена ширина елемента типу коробки дорівнює сумі його ширини, лівої / правої межі та лівої / правої відступів (ліве / праве поле також входить у гру). Якщо ваша коробка має ширину "100%", а також має поля, межі та відступи, вони вплинуть (збільшать) ширину, яку займає об'єкт.

Отже, якщо ваша область тексту має бути шириною 100%, призначте значення ширині, полю ліворуч / праворуч, межі ліворуч / праворуч та відступів ліворуч / праворуч таким чином, щоб їх сума дорівнювала 100%.

У CSS3 ми маємо три моделі розміру коробки . Ви можете використовувати border-boxмодель:

Зазначені ширина та висота (та відповідні мінімальні / максимальні властивості) для цього елемента визначають поле межі елемента. Тобто, будь-яке заповнення або облямівка, вказані на елементі, викладаються та промальовуються всередині зазначеної ширини та висоти. Ширина та висота вмісту обчислюються шляхом віднімання меж та ширини заповнення відповідних сторін із заданих властивостей «ширина» та «висота».

Це було безладдя з боку W3C, і різні браузери лише додавали цієї складності завдяки власним версіям моделей коробок. Особисто я, замість того, щоб думати, який налаштування браузера чи CSS зробить трюк, я просто обертаю вміст коробки ще одним оператором DIV і використовую поля на цьому DIV, замість того, щоб використовувати відступ, наприклад:

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

Хоча це працює лише для контейнерів фіксованого розміру

Це залежить від браузера та реалізації коробкової моделі . Те, що ви відчуваєте, - це правильна поведінка.

IE традиційно помиляється: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Для більш крос-браузерного рішення ви можете уникнути такої поведінки, обернувши будь-який тег, який потребує заповнення, в інший тег із фіксованою шириною та надавши йому width: auto. Таким чином, якщо батько має ширину x, і ви додаєте доповнення до дочірнього елемента, дитина успадкує повну ширину x, застосовуючи відступ правильно, не змінюючи батьківської ширини або власної.

За замовчуванням div приймає ширину батьківського контейнера, тому, щоб уникнути проблем із сумісністю браузера, ви можете додати дочірній div у зазначений div, а потім додати необхідне заповнення до дочірнього div .

NB - не вказуйте ширину дочірнього div, оскільки вона збільшиться, якщо ви додасте відступ