Html inline block display: Все значения свойства display

CSS Display block inline и сравнение блочных и строчных элементов.

Свойство DISPLAY меняет поведение элемента на странице в зависимости от того, какое ему значение задаем. Значений много, но на ПРАКТИКЕ применяются ВСЕГО пять: block, inline, inline-block, none, flex;

display:none

Начнем с самого простого: display:none — убирает элемент из верстки, то как будто мы его удалили или закомментировали. Не стоит путать с visibility:hidden и opacity:0; — они делают элемент полностью прозрачным, но не убирают его, то есть его место остается не занятым, поскольку другие элементы думают что он есть, а при display:none они займут его место.

display:flex

Flex — относительно новое значение, по сути, элемент ведет себя как блочный, но вся суть в том, как ведут себя элементы внутри него. Это довольная обширная тема, об этом будет несколько уроков чуть дальше.

display:block

Блочный элемент — применяется для создания структуры сайта или его элементов. Типичный и наиболее распростаненный представитель — DIV. То есть блочный элемент — это обычный прямоугольник, но в отличие от строчного он изначально принимает всю доступную ширину, а высота — в зависимости от количества контента в нем. если в нем ничего нет, то высота =0. Если с помощью height задать ему размеры, например, 50px, то он их примет, в независимости от контента, и не важно контента больше или меньше. Аналогично с шириной.
К блочным относятся: DIV, h2-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	принимает	принимает	применяется только справа и слева, влияние на соседей оказывает

Более подробно про отличия: https://html5book.ru/block-inline-elements/ и тут https://webref.ru/layout/howtocodeinhtml/chapter10

Пред. урок След. урок

html — отображение: дополнительное поле встроенного блока

спросил 13 лет, 2 месяца назад

Изменено 1 год, 9 месяцев назад

Просмотрено 160 тысяч раз

На этот вопрос уже есть ответы здесь :

Как убрать пробел между элементами inline/inline-block? (41 ответ)

Закрыта 7 лет назад.

Я работаю с несколькими div s, которые настроены на display: inline-block и имеют высоту и ширину . В HTML, если после каждого div есть разрыв строки, справа и внизу div автоматически добавляется поле в 5 пикселей.

Пример:

 
Некоторый текст
Некоторый текст
 

Есть ли свойство, которое я упустил из виду, которое позволит мне сбросить автоматическую маржу?

Обновление

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

 
Некоторый текст
Некоторый текст
 

Не лучшее решение, но все же легче читать, если у вас несколько строк.

• html
• css
• xhtml

5

Пробел влияет на строчные элементы .

Это не должно вызывать удивления. Мы видим это каждый день с элементами span, strong и другими строчными элементами. Установите размер шрифта на ноль, чтобы удалить лишнее поле.

 .контейнер {
  размер шрифта: 0px;
  межбуквенный интервал: 0px;
  интервал между словами: 0px;
}
.контейнер > раздел {
  отображение: встроенный блок;
  поле: 0px;
  отступ: 0px;
  размер шрифта: 15px;
  межбуквенный интервал: 1em;
  интервал между словами: 2em;
}
 

Тогда пример будет выглядеть так.

 <дел>
  
Первый
  
Второй

 
Некоторый текст
Некоторый текст
 

 раздел {
    цвет фона: красный;
    плыть налево;
}
 

 div.container {
    высота строки: 0;
}
div.контейнер > * {
    высота строки: нормальная;
}
 

 <ул>
   

       <а...>...
   

       <а...>...

 

 div {
    маржа: 0;
    заполнение: 0;
}
 

 p. inline {
  дисплей: встроенный; /*делает элемент 
, который по умолчанию является элементом уровня блока, отображается как встроенный элемент, если ему присвоен класс "inline".*/
} 

 Я один элемент.
Я второй элемент.
Я третий элемент.
Мы все в одной строке! 

 li {
    дисплей: встроенный;
} 

 span {
   дисплей: блок;
} 

 
Я один элемент.
Я второй элемент.
Я третий элемент.
Мы все в отдельных строках! 

 раздел {
  отображение: встроенный блок;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  фон: красный;
  белый цвет;
  отступ: 6px;
  поле: 3px;
} 

 .float-box {
отображение: встроенный блок;
ширина: 200 пикселей;
высота: 100 пикселей;
поле: 20 пикселей;
граница: 5px сплошной черный цвет;
}