Какая связь между полем, отступом и шириной в разных браузерах?

Question

Значение ширины CSS = ширина отображения внутри?

или

Значение ширины CSS = ширина отображения внутри + маржинальное CSS-поле + маржинальное CSS-поле справа?

Answer 1

Вы должны ознакомиться с CSS Box Model . Он объясняет, где работают отступы, поля и границы, а также ширина.

Однако обратите внимание, что разные браузеры реализуют это по-разному: в частности, В Internet Explorer есть ошибка блочной модели (это печально известно в IE6 - я не знаю, исправлено ли это в IE7 или IE8), который вызвал печально известный взлом CSS-режима.

Вкратце, Internet Explorer установил свою блочную модель для включения отступов при вычислении ширины, в отличие от официального стандарта, в котором ширина должна составлять только содержимое.

Answer 2

Как уже упоминалось, эмпирическим правилом является блочная модель CSS . Обычно это работает так, как рекламируют такие браузеры, как Opera, Firefox и Safari. Internet Explorer - ваше исключение, где «ширина» включает поля, отступы и границы.

Есть несколько замечательных инструментов, которые визуально отображают, как браузер отображал контент. Для Firefox проверьте Firebug и для Internet Explorer проверьте Панель инструментов разработчика .

Answer 3

Я думаю, что IE до версии 6 неправильно включил границы и отступы по ширине и высоте. См .: Microsoft признает, что IE 5 перепутался

Answer 4

Здесь вы можете увидеть анимированную диаграмму, которая «взрывает» коробку.

Answer 5

Это зависит не только от браузера и выбранной вами версии, но также от типа документа вашего HTML-документа. Internet Explorer в «режиме причуд», например, полностью отличается от Internet Explorer с doctype XHTML 1.0 Transitional.