Высота блока по содержимому css: Как задать высоту блоку по содержимому? — Хабр Q&A — Вебджем.рф

Содержание

html — Ширина div по контенту

Здравствуйте, уважаемые знатоки верстки! Подскажите плиз кроссбраузерное решение задания ширины div по содержимому дочерних элементов. Т.е. имеется, например

<div>
    <span>тут контент с неизвестной шириной</span>
</div>

Как установить ширину l0_b1 == ширине l1_s1?

ПС. Очень желательно без js-хаков.

html
css

Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block;, но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.

Эту задачу можно решить несколькими способами:

1 — С помощью display: inline-block;:

#l0_b1 {
  display: inline-block;
  border: 1px solid purple;
}

<div>
  <span>тут контент с неизвестной шириной</span>
</div>

2 — С помощью display: block;:

#l0_b1 {
  display: block;
  float: left;
  border: 1px solid purple;
}

<div>
  <span>тут контент с неизвестной шириной</span>
</div>

Используя float, не забывайте про clear: both

3 — С помощью display: inline-flex;:

#l0_b1 {
  display: inline-flex;
  border: 1px solid purple;
}

<div>
  <span>тут контент с неизвестной шириной</span>
</div>

4 — С помощью display: table;:

#l0_b1 {
  display: table;
  border: 1px solid purple;
}

<div>
  <span>тут контент с неизвестной шириной</span>
</div>

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

width: fit-content;

Правда с поддержкой там пока не очень все радостно.

Самый простой способ задать диву float:left/right (если это допустимо для позиционирования) или display:inline, тогда его размер будет полностью зависеть от содержимого. (Добавьте больше информации, что должно получаться)

Клевое решение float. Выровнять

clear:both;

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Размеры блока | Уроки | WebReference

Размеры блока — это комплексная величина и складывается из значений разных свойств. Ниже рассмотрим особенности формирования ширины и высоты блока.

Ширина блока

Ширина блока представляет собой сумму значений следующих свойств:

width — ширина содержимого;
padding-left и padding-right — поле слева и справа от содержимого;
border-left и border-right — толщина границы слева и справа;

margin-left и margin-right — отступ слева и справа.

На рис. 1 схематично изображены свойства, влияющие на ширину блока. При этом какие-то свойства могут отсутствовать и на размер влияние не оказывают.

Рис. 1. Ширина блока

Обратите внимание, что свойство width задаёт ширину содержимого, а не всего блока целиком. Если значение width не задано, то оно по умолчанию устанавливается как auto. В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений padding, border и margin. Под доступной шириной в данном случае подразумевается ширина содержимого родительского блока, а если родителя нет, то ширина окна браузера.

В примере 1 показано создание блока, занимающего всю доступную ширину. При изменении ширины окна браузера ширина блока будет соответствующим образом подстраиваться.

Пример 1. Ширина блока

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ширина</title> <style> .block { background: #FFFAC0; /* Цвет фона */ padding: 20px; /* Поля вокруг текста */ border: 2px solid #EF8031; /* Параметры рамки */ margin: 10px; /* Отступы */ } </style> </head> <body> <div>Лев ревёт только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царём природы.</div> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Блок, занимающий всю ширину

Если свойство width задано, то его значение добавляется к общей ширине блока. В качестве примера рассмотрим следующий стиль.

div {
  width: 400px; /* Ширина содержимого */
  padding: 10px; /* Поля вокруг текста */
  border: 4px solid black; /* Параметры рамки */
  margin: 7px; /* Значение отступов */
}

Ширина блока в данном случае будет равна 442 пикселя; эта величина получается складыванием значения ширины содержимого плюс поле слева, граница слева и отступ слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 400 + 10 + 10 + 4 + 4 + 7 + 7 = 442

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

Высота блока

Высота блока формируется по тем же правилам, что и ширина. А именно, высота складывается из значений следующих свойств:

height — высота содержимого;
padding-top и padding-bottom — поле сверху и снизу от содержимого;
border-top и border-bottom — толщина границы сверху и снизу;
margin-top и margin-bottom — отступ сверху и снизу.

Если свойство height не указано, то оно считается как auto, в этом случае высота содержимого вычисляется автоматически. На рис. 3 показаны свойства, влияющие на высоту блока.

Рис. 3. Высота блока

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

1. Если содержимое превышает размер блока при заданном height, то содержимое отображается поверх блока (рис. 4).

Рис. 4. Превышение размеров блока

Чтобы избежать подобного поведения, свойство height лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется добавить свойство overflow — значение auto устанавливает полосы прокрутки при необходимости (пример 2), а значение hidden скрывает всё, что не помещается в заданные размеры.

Пример 2. Использование overflow

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Высота</title> <style> .block { background: #C5DF94; /* Цвет фона */ height: 50px; /* Высота */ padding: 10px; /* Поля вокруг текста */ overflow: auto; /* Добавляем полосы прокрутки */ } </style> </head> <body> <div> <p>Лев ревёт только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царём природы.</p> <p>Охотничий участок льва может иметь длину и ширину до тридцати километров.

</p> </div> </body> </html>

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

Рис. 5. Полосы прокрутки в блоке

2. Установка значения высоты в процентах обычно не приводит к каким-либо заметным результатам, поскольку высота родителя браузером не вычисляется. Чтобы проценты начали работать, высота родителя должна быть задана явно. В примере 3 показано, как задать высоту блока в процентах.

Пример 3. Высота блока

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Высота</title> <style> html, body { height: 100%; /* Высота */ margin: 0; /* Убираем отступы у веб-страницы */ } .block { background: #C5DF94; /* Цвет фона */ height: 100%; /* Высота */ padding: 20px; /* Поля вокруг текста */ box-sizing: border-box; /* Алгоритм подсчёта размеров */ } </style> </head> <body> <div>Лев ревёт только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царём природы.

</div> </body> </html>

Результат данного примера показан на рис. 6. Здесь для <div> родителем выступает элемент <body>, поэтому для него устанавливаем значение height равным 100%. В то же время на <body> действуют те же правила, что и на <div>, поэтому для родителя <body>, которым является <html>, также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты веб-страницы.

Рис. 6. Высота блока в процентах

Алгоритм блочной модели

Ширина блока формируется из значений width, padding, border и margin. Считать итоговую ширину не всегда удобно, особенно когда в качестве значений встречается комбинация пикселей и процентов. Для изменения алгоритма подсчёта ширины и высоты блока применяется свойство box-sizing со значением border-box. После добавления этого свойства к блоку значение width включает в себя padding и border (но не margin). Таким образом, свойство width будет задавать ширину всего блока, а не содержимого как раньше. В примере 4 показано изменение вида поля для поиска, чтобы оно занимало всю доступную ширину веб-страницы.

Пример 4. Использование box-sizing

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ширина</title> <style> body { background: #D6C2AD; /* Цвет фона */ } [type=»search»] { box-sizing: border-box; /* Ширина не учитывает padding и border */ width: 100%; /* Ширина */ border: 1px solid #666; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <input type=»search» placeholder=»Поиск по сайту»> </body> </html>

Результат данного примера показан на рис. 7.

Рис. 7. Ширина поля для поиска в процентах

Перейти к заданиям

Автор: Влад Мержевич

Последнее изменение: 17.01.2023

hyphenate-character — CSS: Каскадные таблицы стилей

Свойство CSS hyphenate-character устанавливает символ (или строку), используемый в конце строки перед разрывом переноса.

Как автоматические, так и мягкие дефисы отображаются в соответствии с указанным значением символа дефиса.

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

 символ дефиса: <строка>;
символ дефиса: авто;

Значения

<строка>: <строка> для использования в конце строки перед разрывом переноса. Пользовательский агент может обрезать это значение, если используется слишком много символов.
авто: Пользовательский агент выбирает соответствующую строку на основе типографских соглашений языка содержимого. Это значение свойства по умолчанию, и его необходимо явно задать только для переопределения другого унаследованного значения.

Исходное значение	`авто`
Применимо ко всем элементам
Унаследовано	да
Вычисленное значение	как указано
Тип анимации	дискретный

 символ дефиса = 
 авто | 
 <строка>

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

HTML

 
  символ переноса: "="
  Supercalifragilisticexpialidocious
  символ дефиса не установлен
  Supercalifragilisticexpialidocious

CSS

 дд {
  ширина: 90 пикселей;
  граница: 1px сплошной черный;
  дефисы: авто;
}
дд#строка {
  -webkit-дефис-символ: "=";
  символ дефиса: "=";
}

Результат

Спецификация
Текстовый модуль CSS, уровень 4 # propdef-hyphenate-character 9004 4

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

Связанные свойства CSS: дефис , переполнение-обертка .

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

Высота CSS

Пример <стиль> .внешний { фон: золото; высота: 150 пикселей; ширина: 150 пикселей; отступ: 20 пикселей; } .внутренний { фон: оранжевый; высота: 80%; } <дел> <дел>

Свойство CSS height используется для указания высоты элемента.

В частности, свойство height задает высоту области содержимого или области границы (в зависимости от значения свойства box-sizing ) определенных блоков.

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

Также см. max-height , ширина и свойства max-width .

Синтаксис

Возможные значения

длина: Задает значение длины для высоты (например, 300 пикселей ). Отрицательные значения недопустимы.
процент: Задает процент значение высоты (например, 80% ). Это вычисляется как высота блока, содержащего сгенерированный блок. Отрицательные значения недопустимы.
в наличии: Равен высоте содержащего блока минус поля, граница и отступы текущего элемента.
максимальное содержание: Максимальная высота содержимого.
мин. содержание: Минимальная высота содержимого.
фит-контент: Равен max(min-content, min(max-content, available)) .
соответствие содержанию( длина в процентах ): Если указано для встроенной оси, использует min(max-content size, max(min-content size, length-percent )) ; в противном случае вычисляется как auto .
авто: Высота зависит от значений других свойств. Браузер рассчитает высоту соответственно.
комплекс: То же, что и auto , за исключением того, что элементы со сложным соотношением сторон считаются имеющими внутреннее соотношение.
стрейч: Использует встроенный размер с растяжкой или размер блока с растяжкой в зависимости от режима записи.

Значения ключевого слова всегда задают размер блока содержимого (на них не влияет размер коробки свойство). Это не относится к значениям длины и в процентах .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный: Представляет значение, указанное как начальное значение свойства.
унаследовать: Представляет вычисленное значение свойства родительского элемента.
снято с охраны: Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение: авто
Применяется к: Все, кроме столбцов таблицы, групп столбцов и незаменяемых встроенных элементов.

Высота блока по содержимому css: Как задать высоту блоку по содержимому? — Хабр Q&A

html — Ширина div по контенту

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Размеры блока | Уроки | WebReference

Ширина блока

Высота блока

Алгоритм блочной модели

hyphenate-character — CSS: Каскадные таблицы стилей

Значения

HTML

CSS

Результат

Обнаружили проблему с содержанием этой страницы?

Высота CSS

Синтаксис

Возможные значения

Общая информация

Добавить комментарий Отменить ответ

Рубрики