Автоматическое определение высоты

В самом простом случае блочный элемент со значением height: auto в нормальном потоке генерируется таким образом, чтобы его высоты как раз хватало для размещения строк его содержимого (включая текст). Значение auto задает границы абзаца и предполагает отсутствие отступов – ожидается, что нижняя рамка должна находиться сразу под нижней строкой текста, а верхняя рамка – прямо над верхней строкой текста.

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

A paragraph!



Another paragraph!




Если в предыдущем примере заменить рамки отступами, результат для высоты div не изменится: она по-прежнему будет содержать поля абзаца.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание
Вертикальное форматирование