Html display inline height

CSS display Property

The display property defines the type of the box which is used for an HTML element.

With the display property we can override the initial value of an element. For example, a block-level element could be displayed as an inline element by specifying a value of «inline». An inline element does not accept the height and width properties. It will just ignore it.

In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet. On the other hand, the default value in XML is «inline».

There are several main box formats in CSS:

• Inline
  Inline elements or inline-level elements are boxes flowing in a line without breaking it. The , , elements are part of a line box but cannot cause a line break. Inline elements can have padding and margins, but they cannot have width and height because defining them on an inline won’t change its dimensions. Specifying padding and margins on the element will push the other elements on the line only horizontally. However, an inline-level element can accept width and height, if it is set to be an inline-block element using the display property.
• Inline-block
  Inline-block elements are the same as inline element except that they except width and height. The width and height push the elements on the line both horizontally and vertically.
• Block
  Block boxed or block-level elements do not sit in a line box but break past it. By default, they occupy as much horizontal space as possible. Block-level elements can contain other block-level elements. The , , — , , , and are examples of block level elements.
• Flex
  The display property is also used for Flexbox. The flex value generates a block-level box for the element and lays out the content according to the Flexbox model. Here you can read about The Ultimate Guide to Flexbox.
• Grid
  The display property initially sets the Grid layout. It generates a block-level box for the element laying out the content according to the Grid model.
• Table Values
  Display values allows you to make non-table elements behave like table elements. Each of the table values forces the element to behave like a corresponding table element in HTML. The inline-table behaves like a HTML element, but as an inline box. There is a block-level context inside the table box.

Syntax

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Example of the display property:

html> html> head> title>Title of the document title> style> .display li < display: inline; margin-right: 10px; > style> head> body> h2>Display property example h2> p>Here the list item is with its initial value: p> ul> li>List iteam li> li>List iteam li> ul> p>Here the list item is used with the display property. The "inline" value is used: p> ul class="display"> li>List iteam 1 li> li>List iteam 2 li> ul> body> html>

Result

Example of the display property with the «inline» and «block» values:

html> html> head> title>Title of the document title> style> .inline < border: 1px solid #1c87c9; display: inline; > .block < border: 1px solid #1c87c9; display: block; height: 30px; width: 300px; > style> head> body> h2>Display property example h2> p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width: p> span>This is some text. span> span class="inline">This is another text. span> hr> p>Here the list item is used with the "block" value of the display property: p> span class="block">This is some text. span> span class="block">This is another text. span> body> html>

Example of the display property with the «block» value:

html> html> head> title>The title of the document title> style> .block < display: block; border: 1px solid #666; background-color: #eee; padding: 10px; width: 200px; > .hello < border: 1px solid #1c87c9; background-color: #8ebf42; padding: 10px; > style> head> body> h2>Display property example h2> div class="block"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. div class="hello">HELLO! div> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. div> body> html>

Example of the display property with the «contents» value:

html> html> head> title>Title of the document title> style> .contents < display: contents; border: 1px solid #666; background-color: #eee; padding: 10px; width: 200px; > .hello < border: 1px solid #1c87c9; background-color: #ccc; padding: 10px; text-align: center; > style> head> body> h2>Display property example h2> div class="contents"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div class="hello">HELLO! div> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. div> body> html>

Example of the display property with the «flex» value:

html> html> head> title>Title of the document title> style> #flex < width: 300px; height: 100px; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ -webkit-justify-content: center; /* Safari 6.1+ */ display: flex; justify-content: center; > div < width: 70px; height: 70px; > style> head> body> h2>Display property example h2> p>Here the "display: flex;" is used: p> div id="flex"> div style="background-color: #1c87c9;">1 div> div style="background-color: #666;">2 div> div style="background-color: #8ebf42;">3 div> div> body> html>

Values

Browser support

Источник

Как отобразить элемент на странице. Свойство display

Свойство display определяет тип отображения элемента, как он будет отображаться на веб-странице: как блок, строчный элемент или каким-то другим способом.

Значения свойства display

Теперь разберём на примерах значения свойства display .

block — элемент отображается как блок и занимает всю доступную ширину. Новый блок начинается с новой строки. Примером элемента, который имеет значение display: block , может быть div .

 
Заголовок блока
 
Текст внутри блока
 
 

inline — элемент отображается как строчный элемент и не создаёт новый блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого. Примером элемента, который имеет значение display: inline , может быть span .

Этот текст выделенный текст и еще немного текста
 

Этот текст выделенный текст и еще немного текста

inline-block — элемент отображается как строчный элемент, но его содержимое может быть отформатировано как блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого, но может иметь ширину и высоту. Примером элемента, который имеет значение display: inline-block , может быть button .

Этот текст находится на той же строке, что и
 
этот текст
 

none — элемент не отображается на веб-странице и его содержимое не занимает места. Это может быть полезно для скрытия элементов на странице или для создания анимаций. Примером элемента, который имеет значение display: none , может быть script .

Пример использования свойства display с разными значениями.

Этот блочный элемент занимает всю ширину.
 Этот строчный элемент занимает только столько места, сколько ему нужно. Этот элемент имеет значение inline-block, поэтому его содержимое может быть отформатировано как блок и иметь ширину и высоту. 
Этот элемент имеет значение none, поэтому он не отображается на веб-странице.
 

.block-example < display: block; background-color: yellow; >.inline-example < display: inline; background-color: pink; >.inline-block-example < display: inline-block; background-color: lightblue; width: 200px; height: 50px; >.hidden-element

Блочный элемент имеет жёлтый фон, строчный элемент — розовый фон, элемент button — голубой фон и имеет ширину и высоту, а скрытый элемент не отображается на странице.

Наследуется ли свойство display

Свойство display является не наследуемым, что означает, что тип отображения элемента не будет наследоваться его потомками. Тип отображения элемента должен быть указан явно для каждого элемента на странице.

Например, если родительский элемент имеет свойство display: block; , а его дочерний элемент не имеет заданного свойства display , то тип отображения дочернего элемента будет определён по умолчанию, который может отличаться в зависимости от типа элемента.

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

 
Это абзац, наследующий свойства родительского элемента
 
Это абзац с явно заданным типом отображения
 
 
 

Здесь родительский элемент имеет свойство display: block; , но дочерний элемент .child имеет свойство display: inline; . Поэтому абзац, находящийся в дочернем элементе, будет отображаться как инлайновый элемент, несмотря на то, что родительский элемент имеет тип отображения блочного элемента.

Нюансы использования

Как и любое CSS-свойство, display имеет нюансы и особенности, которые важно учитывать при создании веб-страниц.

• display определяет, как элемент будет взаимодействовать с другими элементами на странице. Например, элементы с типом block занимают всю доступную ширину и начинаются с новой строки, что может повлиять на позиционирование других элементов на странице.
• Некоторые элементы имеют собственные значения по умолчанию для свойства display . Например, div имеет значение по умолчанию display: block , а span имеет значение display: inline . Поэтому, если вы хотите изменить значение display для этих элементов, необходимо указать это в CSS.
• При использовании значения display: inline-block нужно учитывать, что между элементами может появиться небольшой пробел, который вызван пробелом в HTML-коде. Этот нюанс можно устранить разными способами, например, удалением пробелов в коде или применением стилей, которые устраняют эффект.

⭐ Поддержка браузерами свойства display

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник