фон на блочные и встроенные элементы?

Question

на что ссылается фон в блочной модели (содержимое, отступы, границы и поля)?

Другими словами, какая часть блочной модели будет отображать цвет фона, если я установлю его на зеленый?

и это только блочные элементы (div, заголовок и т. Д.), Которые применяются к блочной модели? у встроенных элементов (span, text) тоже есть padding, border и margin?

Answer 1

Этот небольшой график покажет, как в браузере отображается поле:

блок-схема http://img132.imageshack.us/img132/2692/boxchart.jpg

Как видите, поле - это пространство между самой рамкой и любым содержимым, которое может ее окружать. Граница - это просто линия вокруг рамки. Заполнение - это пространство между краем поля и содержимым внутри поля. Любой заданный фон заполняет весь блок (в пределах границ), сохраняя при этом поле (пустое пространство) вокруг блока.

Я считаю, что почти каждый элемент может использовать поля, фон и границу. Тем не менее, некоторые элементы не поддерживают заполнение, если оно не на уровне блока, потому что это будет в основном то же самое, что и margin. Вы всегда можете опробовать разные стили, чтобы увидеть, что работает, а что нет, и как все перемещается на основе установленных вами стилей.

Answer 2

Полная занятость элементов, не включая пространство, занимаемое полями. Вы можете проверить это с помощью следующей разметки / CSS:

.block { margin:5px; padding:0; width:25px; height:25px; 
         background-color:orange; float:left; }
<div class="block"></div>
<div class="block"></div>

Отобразите это, и вы найдете 10px между оранжевыми прямоугольниками - наши поля.

Встроенные элементы тоже имеют отступы и поля, но вы не всегда можете использовать их одинаково, поскольку они встроенные, а не на уровне блоков.