CSS Display block inline и сравнение блочных и строчных элементов.
Свойство DISPLAY меняет поведение элемента на странице в зависимости от того, какое ему значение задаем.
Значений много, но на ПРАКТИКЕ применяются ВСЕГО пять: block, inline, inline-block, none, flex;
К блочным относятся: DIV, H1-H6, P, header, footer, section и другие
К строчным относятся: span, i, em, a, b, strong и другие
К блочно-строчным относятся: IMG, input, select и другие. Важно! В документациях часто противоречивая информация, поэтому проверяйте все на практике:
https://jsfiddle.net/ybdagzn7/
Также в документациях бывает только разделение на два вида: блочные и строчные, а все блочно-строчные хаотично разбросаны в одну из категорий, но чаще к строчным.
Более подробно про отличия:
https://html5book.ru/block-inline-elements/ и тут https://webref.ru/layout/howtocodeinhtml/chapter10
Пред. урок След. урок
display:none
Начнем с самого простого: display:none - убирает элемент из верстки, то как будто мы его удалили или закомментировали. Не стоит путать с visibility:hidden и opacity:0; - они делают элемент полностью прозрачным, но не убирают его, то есть его место остается не занятым, поскольку другие элементы думают что он есть, а при display:none они займут его место.display:flex
Flex - относительно новое значение, по сути, элемент ведет себя как блочный, но вся суть в том, как ведут себя элементы внутри него. Это довольная обширная тема, об этом будет несколько уроков чуть дальше.display:block
Блочный элемент - применяется для создания структуры сайта или его элементов. Типичный и наиболее распростаненный представитель - DIV. То есть блочный элемент - это обычный прямоугольник, но в отличие от строчного он изначально принимает всю доступную ширину, а высота - в зависимости от количества контента в нем. если в нем ничего нет, то высота =0. Если с помощью height задать ему размеры, например, 50px, то он их примет, в независимости от контента, и не важно контента больше или меньше. Аналогично с шириной.К блочным относятся: DIV, H1-H6, P, header, footer, section и другие
display:inline
Строчные элементы - в подавляющем большинстве случаев применяются для форматирования текста, например, сделать полужирным, наклонным, поменять цвет, подчеркивание итд. Типичным строчным элементов является span, который сам по себе ничего не делает, но с помощью стилей можно поменять текст внутри него, например, сделать полужирным или наклонным, то есть без использования b и i.К строчным относятся: span, i, em, a, b, strong и другие
display:inline-block
Блочно-строчные все таки ближе по поведению к строчным, но в отличие от строчных они изначально имеют определенную высоту и ширину, но встраиваются в текст, например, вставленные смайлики внутри текста, если они по высоте меньше или равны высоте букв, то вы и не заметите особой разницы, а вот если вставить блочный элемент внутри текста, то увидите как все сильно поменяется.К блочно-строчным относятся: IMG, input, select и другие. Важно! В документациях часто противоречивая информация, поэтому проверяйте все на практике:
https://jsfiddle.net/ybdagzn7/
Также в документациях бывает только разделение на два вида: блочные и строчные, а все блочно-строчные хаотично разбросаны в одну из категорий, но чаще к строчным.
Сравнительная таблица блочных и строчных элементов
| block | inline-block | inline | |
|---|---|---|---|
| Ширина width по умолчанию |
Занимает всю доступную ширину, то есть 100%. | Занимает ширину по количеству контента | Занимает ширину по количеству контента |
| width=500px | принимает | принимает | проигнорирует |
| height | по количеству контента | по количеству контента | по количеству контента |
| внутренний отступ = padding | принимает | принимает | применяется, но на соседние элементы не влияет. |
| margin | принимает | принимает | применяется только справа и слева, влияние на соседей оказывает |
Пред. урок След. урок