Что делает display: inline?

По моему опыту, многие проблемы с CSS возникают из-за того, что разработчики испытывают трудности с пониманием свойства display. Поэтому я создал живую шпаргалку. В этой статье я расскажу о display: inline.

Но прежде чем приступить к чтению, я оставляю ссылку на мою рассылку Substack о CSS. Вы знаете, что делать 😎

Поехали!

Поведение по умолчанию

1. Свойства ширины и высоты элементов с display: inline вычисляются автоматически в зависимости от содержимого.

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

2. Если есть пространство, то элементы с display: inline будут располагаться на одной строке. Если нет, браузеры перенесут их часть на новую строку.

Особенности боксовой модели

3. Свойства width и height не могут быть установлены для элементов с display: inline.

4. Можно задать отступы, границы и поля. Вертикальные значения окажутся за пределами родительского элемента.

Кроме того, отступы, границы и поля могут перекрывать отступы и границы родительского элемента.

Отступы, границы и поля перекрывают друг друга, если элементы с display: inline находятся в нескольких строках.

В случае с многострочными элементами поля могут выходить за пределы по горизонтали.

Свойство overflow обрезает поля, если значение отличается от видимого.

Нет смысла использовать margin: auto для элементов с display: inline, потому что это не сработает.

P.S.
💪 Получайте больше бесплатных советов по CSS прямо на свой почтовый ящик

❤ Огромное спасибо моим спонсорам: Бен Ринхарт, Джесси Уиллард, Таня Тен, Константинос Капенекакис.

Оцените статью
devanswers.ru
Добавить комментарий