Какая разница между отступом и полем? - PullRequest
11 голосов
/ 13 мая 2010

В W3 CSS, а также в XUL / CSS? (не между CSS и XUL / CSS).

Ответы [ 5 ]

21 голосов
/ 13 мая 2010

Я рекомендую эту статью для вас. Диаграмма из этой статьи.

alt text

http://elegantcode.com/2010/01/26/css-basics-the-box-model/

8 голосов
/ 13 мая 2010

Заполнение - это пространство ВНУТРИ элемента (внутри границы элемента).

Поля - это пространство ВНЕ (вокруг) элемента.

2 голосов
/ 13 мая 2010

Заполнение - это область между содержимым и границей, а поле - область за пределами границы.

См. блочная модель CSS для уточнения.

1 голос
/ 13 мая 2010

ОК, некоторые из этих ответов используют запутанную терминологию и неверны.

Ширина css элемента не включает отступы, границы или поля.

Поэтому неточно говорить, что "заполнение внутри элемента".

Правильно сказать, что "отступ находится внутри границы элемента" и "поле находится за границей элемента".

Чтобы вычислить, сколько места занимает блок (например, только по горизонтали):

horiz. space = width + 2(padding) + 2(border) + 2(margin)

Меня раздражает, когда люди говорят, что «заполнение - это пространство внутри элемента», потому что: у элемента есть заполнение, у него есть граница и поле. Все этого материала вне ширины содержимого элемента и должны учитываться при расчете, сколько места занимает элемент.

Если вы говорите, что «заполнение находится внутри элемента», вы делаете ту же ошибку, которую MSIE допустила в своей сломанной модели бокса, и у веб-дизайнеров много головных болей.

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

0 голосов
/ 13 мая 2010

отступ - часть ширины элемента. поле находится снаружи и не является частью ширины

Вот интересная демонстрационная модель, которая поможет вам понять.

http://redmelon.net/tstme/box_model/

...