Добавление отступов к элементам HTML - IE, FF, Chrome и т. Д.

Question

У меня есть сомнения.Давайте рассмотрим, что у нас есть div ширины 200px.Если я добавлю следующий элемент

style="padding-left:10px; padding-right:10px"

к элементу, что происходит на самом деле?Будет ли общая ширина div увеличена до 220px с 10px слева (для заполнения слева), оригинальной шириной 200px в середине и 10px справа (для заполнения справа)?

Или потребуется заполнениепространство от 200px и становится (10px + 180px + 10px)?

Отличается ли приведенный выше рендеринг для каждого браузера (особенно IE и FF)?

Обновление

<div style="width:180x">    
<div style="width: 180px;background-color: #4E81BD;text-align: left;padding-left: 5px;padding-right: 5px;">
    <a class="anchor-tag" href="Javascript:;"><span style="font-family: Calibri,Tahoma,Verdana;font-weight: 500; color: white">Rasu</span></a>
</div>
<div style="width: 180px;height: 270px;border: 1px solid #4E81BD;padding: 5px;overflow-y: auto;overflow-x: hidden;">
    <div style="border: 1px solid #DADADA;height: 150px;overflow-x: hidden;overflow-y: auto;text-align: left;font-family: Calibri;">
    </div>
    <div style="height: 10px;">
    </div>
    <div style="height: 75px;border: 1px solid #DADADA;">
        <textarea>[Type your message here]</textarea>
    </div>
</div>
</div>

Спасибо

NLV

Answer 1

Он станет шириной 220px.

В IE5 или IE6 (режим причуда) это будет 10px + 180px + 10px, но я бы об этом не беспокоился.История может быть найдена здесь: http://www.quirksmode.org/css/box.html

Answer 2

Все современные браузеры соответствуют блочной модели W3C. Смотрите здесь для деталей. Вот диаграмма, показывающая, как рассчитываются габаритные размеры коробки:

По сути, размеры коробки: width + padding + border. Поля не добавляются к ширине, хотя это может повлиять на расположение блока.

Филипп прав насчет IE5, у которого модель сломанной коробки.

Если вы хотите изменить способ работы блочной модели, вы можете использовать атрибут box-sizing CSS3, хотя на этом этапе вам также придется использовать -webkit-box-sizing, -ms-box-sizing и -moz-box-sizing для убедитесь, что все браузеры принимают значение.

Подробнее здесь: http://www.quirksmode.org/css/box.html