Блочная модель html. Управление блочной моделью CSS. В чем различие между внутренним и внешним отступом

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

На примере видно, что текст вышел за границы блока.

Избежать подобного очень просто - достаточно не задавать высоту контента (height ). Впрочем, иногда нужно строго определить высоту блока. В этом случае можно использовать свойство overflow со значением auto . Это свойство будет в блоке создавать полосу прокрутки в случае, если размер контента привысит размер блока.

Добавим в стиль примера №9 свойство overflow со значением auto и результат будет таким:

У свойства overflow есть другое значение, которым также можно регулировать высоту блока - hidden (англ. скрытый). Это значение просто скрывает всё, что не влазит в установленные размеры блока.

Минимальная и максимальная ширина элемента

В этой статье также уместно вспомнить свойства min-width и max-width устанавливающие минимальную и максимальную ширину элемента соответственно.

Свойство min-width работает так: если пользователь меняет размеры окна браузера, то ширина блока не становиться меньше минимальной, а в таком случае появляется полоса прокрутки. Значение ширины элемента будет зависеть от значений свойств width , max-width и min-width .

В таблице приведены правила расчёта браузерами ширины блока при использовании этих свойств.

Свойство max-width - устанавливает максимальную ширину элемента. Пример использования свойства max-width :

Минимальная и максимальная высота элемента

Аналогично есть свойства для назначения минимальной и максимальной высоты элемента: min-height и max-height .

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

В процессе мы обсудим тему, известную как блочная модель и как она работает с HTML и CSS. Мы также рассмотрим несколько новых свойств CSS и используем некоторые значения размеров, о которых рассказывали в уроке 3. Давайте начнём.

Как отображаются элементы?

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

display

Как именно отображаются элементы - как блочные или строчные или как-то ещё, определяется свойством display . Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано. Есть немало значений для свойства display , но наиболее распространённые это block , inline , inline-block и none .

Мы можем изменить значение свойства display элемента, выбрав этот элемент в CSS и задав новое значение свойства display . Значение block сделает этот элемент блочным.

P { display: block; }

Значение inline сделает этот элемент строчным.

P { display: inline; }

Самое интересное это значение inline-block . Его использование позволит элементу вести себя как блочный, включая все свойства блочной модели (которые мы вскоре рассмотрим). Однако, элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию.

P { display: inline-block; }

Демонстрация inline-block

Пространство между строчно-блочными элементами

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

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

Div { display: none; }

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

Что такое блочная модель?

В соответствии с концепцией блочной модели, каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.

Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.

Рис. 4.01. Когда мы смотрим на каждый элемент по отдельности, то можем увидеть, что все они прямоугольны, независимо от их представленных форм

Каждый элемент на каждой странице соответствует блочной модели, так что это невероятно важно. Давайте взглянем на неё, наряду с несколькими новыми свойствами CSS, чтобы лучше понять, как мы можем с этим работать.

Работа с блочной моделью

Каждый элемент представляет собой прямоугольный блок и есть несколько свойств, которые устанавливают размер этого блока. Внутренность блока определяется шириной и высотой элемента, который может быть задан свойством display , содержимым элемента или свойствами width и height . padding и затем border расширяют размеры блока наружу от ширины и высоты элемента. Наконец, любой указанный margin идёт за пределами рамки.

Каждая часть блочной модели соответствует свойству CSS: width , height , padding , border и margin .

Взглянем на эти свойства внутри некоторого кода:

Div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }

В соответствии с блочной моделью общая ширина элемента может быть рассчитана по следующей формуле:

Margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Для сравнения, в соответствии с блочной моделью общая высота элемента может быть рассчитана по следующей формуле:

Margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Рис. 4.02. Блочная модель включает базовую высоту и ширину плюс padding, border и margin

Используя эти формулы, мы можем найти общую высоту и ширину блока из нашего примера.

Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Высота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Блочная модель, без сомнения, одна из наиболее запутанных частей HTML и CSS. Мы устанавливаем значение свойства width как 400 пикселей, но фактическая ширина нашего элемента 492 пикселя. По умолчанию блочная модель коробка аддитивна. Таким образом, для определения фактического размера блока мы должны принять во внимание поля, границы и отступы для всех четырёх сторон блока. Наша ширина включает не только значение свойства width , но и размер левого и правого поля, левую и правую границу, левые и правые отступы.

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

width и height

У каждого элемента есть ширина и высота по умолчанию. Эта ширина и высота может быть равна нулю, но браузеры по умолчанию отображают каждый элемент с размером. В зависимости от того, как отображается элемент, ширина и высота по умолчанию может быть соответствующей. Если элемент является ключевым в макете страницы, для него может потребоваться задать определённые значения свойств width и height . В этом случае значения свойств для не строчных элементов могут быть указанными.

width

По умолчанию ширина элемента основана на значении display . У блочных элементов ширина по умолчанию 100% и занимает всё доступное горизонтальное пространство. Строчные и строчно-блочные элементы расширяются и сжимаются горизонтально для размещения их содержимого. Строчные элементы не могут иметь фиксированный размер, таким образом, ширина и высота относятся только к не строчным элементам. Чтобы задать определённую ширину для не строчных элементов, используйте свойство width :

Div { width: 400px; }

height

Высота элемента по умолчанию определяется его содержимым. Элемент будет расширяться и сжиматься по вертикали при необходимости, чтобы вместить его содержимое. Установить определённую высоту для не строчных элементов можно через свойство height :

Div { height: 100px; }

Размеры строчно-блочных элементов

Пожалуйста, помните, что строчные элементы не принимают свойства width и height и любые их значения. Блочные и строчно-блочные элементы, однако, принимают свойства width и height и соответствующие им значения.

margin и padding

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

margin

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

Div { margin: 20px; }

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

padding

Свойство padding очень похоже на свойство margin , однако располагается внутри границ элемента. Свойство padding используется, чтобы задать пространство непосредственно внутри элемента. Вот код:

Div { padding: 20px; }

Свойство padding в отличие от margin работает вертикально для строчных элементов. Вертикальный padding может сливаться со строкой выше или ниже данного элемента, но будет отображаться.

margin и padding для строчных элементов

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

Отступы и поля работают как обычно для блочных и строчно-блочных элементов.

Установка margin и padding

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

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

Div { margin: 20px; }

Чтобы установить одно значение для верхней и нижней стороны, а другое значение для левой и правой стороны элемента, укажите два значения: вначале сверху и снизу, затем слева и справа. Здесь для