Не используете ширины и отступы / поля для одного элемента?

Question

Я видел, как многие люди упоминали, что вы не должны использовать ширину и отступы или поля в одном элементе с CSS Почему это так?

Answer 1

Поскольку некоторые браузеры рассматривают ширину как общую ширину элемента, включая отступы и поля, а другие рассматривают ширину как базовую ширину, к которой добавляются отступы и поля. В результате ваш дизайн будет выглядеть по-разному в разных браузерах.

Для получения дополнительной информации см. Страницу W3C на блочной модели и дубль приемника режима .

Answer 2

Многие люди все еще цепляются за представления о неисправных блочных моделях в IE и считают, что если вы начнете возиться с шириной элементов, отступами и полями, у вас возникнут проблемы.

Это довольно устаревший совет - при условии, что вы используете правильный тип документа , все довольно современные браузеры (включая IE6 +) будут работать с одной и той же блочной моделью, и у вас не должно быть слишком много проблем к этому.

Это CSS, у вас, очевидно, будет миллион других кросс-браузерных проблем, но печально известная блочная модель IE уходит в прошлое.

Answer 3

Я никогда не сталкивался с проблемой, вызванной совместным использованием ширины, отступов и / или полей.

До тех пор, пока у вас есть действительный DOCTYPE и вы не находитесь в режиме Quirks, вы будете иметь предсказуемую блочную модель и для этого должны использовать ту, которая наиболее подходит вне поля / отступа, для представления того, что вы пытаетесь сделать.

Примечание: Поля применяются за пределами границ, отступы применяются внутри границ. Ширина означает внутреннюю ширину контейнера, Общая ширина = поле + граница + отступ + ширина (помня, что первые три добавляются для левой и правой стороны).

Answer 4

Следует отметить один важный момент: практически невозможно использовать процентную ширину. Например, если вы хотите, чтобы ваш div "content" занимал всю ширину, но имел отступ в 10px:

#content {
    width: 100%;
    padding: 0 10px;
}

Это работает в (разумной, но неправильной) модели IE, но в браузерах, соответствующих стандартам, ваш div будет занимать ширину 100% + 20px, что не годится. Решением является использование другого «внутреннего» контейнера.

<div id="content">
    <div class="inner">
        content here.
    </div>
</div>

#content {
    width: 100%;
}
#content .inner {
    padding: 0 10px;
}

Немного раздражает иметь дополнительную разметку, но в долгосрочной перспективе многое облегчает.

Answer 5

Я могу придумать 2 причины:

1) старая «блочная модель» IE действительно нестабильна, поэтому, когда у вас есть элемент со стилем {width: 300px; отступы: 30 пикселей; margin: 20px;} его контур может фактически не соответствовать ожидаемым 400px (размер 300 px, плюс 2 30px отступа, плюс 2 20 px margin. Я думаю, что его фактическая ширина будет 340, так как он сворачивает заполнение в вычисление ширины .

, который приносит ... ... 1005 *

2) Некоторые люди находят вычисления немного запутанными.

Тем не менее, я лично использую ширину вместе с отступами и полями, и у меня нет проблем с этим. Если вы ограничиваете себя в том, чтобы не использовать ширину при использовании отступов / полей, это означает, что вы добавляете в свой код множество несемантических ошибок. Это означает, что вы должны знать, что различные браузеры собираются делать с элементом, но именно поэтому мы проводим тестирование.

Answer 6

Причиной может быть известная проблема коробочной модели .

Сводка: IE отображает width , отличную от стандартной визуализации, если отступы и поля используются с width или height.

Answer 7

Вы утверждаете, что значения отступов и / или полей не должны сосуществовать с элементом DOM, которому также присвоено значение ширины? Если это так, это верно только в том случае, если вы не хотите писать CSS, который совместим как с IE, так и с браузерами, которые реализуют веб-стандарты (например, Firefox). Было бы трудно достичь нужного макета, как правило, без некоторого значения поля или отступов. Но я предлагаю вам написать CSS, который совместим с обоими браузерами. Если это не то, что вы просите, поправьте меня, пожалуйста:)