HTML

Структура элемента в блочной

модели

Блок состоит из непосредственно контента (внутреннего содержимого), внутренних отступов, границ и, наконец, внешних отступов.

Структура элемента в блочной

модели

Для управления каждой из составных частей блока существуют соответствующие CSS свойства: внутренние отступы — padding, границы — border, внешние отступы — margin. При желании эти свойства можно задать для каждой стороны блока отдельно:

Структура блочных элементов

Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content — содержание).

Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.

Между содержимым и границей существуют внутренние расстояния - поля (свойство padding). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.

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

Также для блока можно задать фиксированную ширину (свойство width) и высоту (свойство height), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.

Внутренний и внешний отступ

●padding — это отступ между контентом и границей, а margin — это отступ между границей и родительским элементом.

●если для элемента задать фон (background), то этим фоном зальется и контент и внутренний отступ (padding). Margin же, находясь снаружи, всегда остается прозрачным.

●padding, если провести аналогию, это поля на листе бумаги. Они имеют тот же цвет, что и сам лист, но текст на них не заходит. Margin — это расстояние от края листа до другого, лежащего рядом листа или, скажем, до края стола.

●padding и margin по разному участвуют в подсчете общей ширины блока. Это зависит от принятой блочной модели.

Блочные модели

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

Структура блока элемента абсолютно одинакова. Единственное, чем отличаются различные модели — это правилами определения размеров элемента.

Втрадиционной блочной модели, которую поддерживает IE6 в режиме совместимости, размеры

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

Вблочной модели W3C размеры элемента, задаваемые свойствами width и height, включают в себя только контентную часть. То есть width и height не включают в себя ни размеры внутренних отступов, ни размеры границ

Действительные размеры

элемента

Традиционная - элемент имеет такие размеры, какие мы ему задаем в CSS.моделью W3C - здесь заданные в CSS размеры (width и height) и действительные размеры элемента не совпадают

В ситуации, когда width элемента равен 100%, а padding и/или border не равен 0 действительная ширина элемента будет больше 100%, а это далеко не всегда желательно.

Вот это и есть самая большая сложность блочной модели W3C: когда ширина указана в процентах, а padding и border в пикселях. Такую ситуацию нужно, если не избегать, то во всяком случае использовать пореже и с пониманием вопроса.

Схлопывание margin

Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.

Оба отступа положительны

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

Один из отступов отрицательный

В этом случае происходит складывание отступов по правилам математики: x + (-y)

Так, если отступы равны -10px и 20px, то итоговое значение будет 10px.

Оба отступа отрицательны

Из двух значений выбирается наибольшее по модулю, оно же и выступает в качестве отрицательного отступа между элементами. Так, если отступы равны -10px и -20px, то итоговое значение будет -20px.

Схлопывание вложенных

элементов

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

В примере приведенном выше у родительского элемента был верхний маржин 5px, но он схлопнулся с верхним маржином 10px дочернего элемента. В результате получили у верхний результирующий отступ 10px — родитель «провалился» на 5px вниз.

Схлопываются как верхний отступ родителя с верхним отступом первого дочернего элемента, так и нижний отступ родителя с нижним отступом последнего дочернего элемента.

Если один из margin отрицательный, а другой положительный, результирующий отступ будет равен их сумме.

Схлопывание не будет между

●родительским элементом и дочерним элементом, если у родительского элемента с этой стороны есть внутренний отступ (padding) или граница (border);

●плавающим блоком и любыми другими блоками (в том числе и дочерними блоками);

●абсолютно спозиционированным блоком и любыми другими блоками (в том числе и дочерними блоками)

●строчным блоком и любыми другими блоками (в том числе и дочерними блоками);

●элементом устанавливающим новый контекст форматирования (например, плавающим блоком или блоком с overflow отличным от visible) и его дочерними блоками;

●корневым элементом и его дочерними блоками.

Понятие потока

В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему различные свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.

<style type="text/css">

.bg_green { background: green; }

.w125 { width: 125px; }

.bg_red { background: red; } </style>

</head>

<body>

<div class="bg_green">first block first block first block </div> <div class="bg_red w125">second block second block </div> <p>text text text text text text text text text text text text

<div class="bg_green">first block first block first block </div> <div class="bg_red">second block second block </div> </body>