Display | CSS Property

⌚ CSS3 Essentials

CSS display property define element's surrounding behavior with other element, every element on web page virtually rectangular box. Display property specify how the rectangle box behaves with other rectangle box.

• Inline is a default property of every element on first level.  
• Display properties are specified by keyword (like block, inline and so on) values.
• Keyword values are grouped into six categories (like outside, inside and so on).
• Block-level elements behavior with float or display property

1. <display-outside>
1. Specify element's outer display.
2. Play flow layout role on web page.
1. block: The element generates line breaks both after and before in the normal flow of the web page.
1. <div>, <section>, <ul>, <p>, <h1>,...
2. inline: The element generates line no breaks both after and before in the normal flow of the web page. Instead, next element will be on the same line if there is space.
1. <span>, <em>, <b> ...
2. Accepts margin and padding but works only horizontally not vertically.
3. Not accept height and width.
2. <display-inside>
1. Outside behavior like block, inline or something. 
2. In addition it is also define element's inner display type. Means inside content layout is specified by keyword values.
1. table: Outside behavior acts like block-level box. Inside table element like HTML.
2. flex: Outside behavior acts like block-level element. Inside layout model acts flex box model.
3. grid: Outside behavior acts like block-level element. Inside layout model acts grid model.  
4. subgrid:  If the parent element has grid, the element itself and its content are laid out according to the grid model.
3. <display-listitem>
1. list-item: Separate list of elements are inline, but total list of item blocked by default.
4. <display-internal>
1. Some layout models like table, have a complex internal model.
2. Children has different internal structure and complex also. Internal keyword value specify the behavior of the element.
5. <display-box>
1. Define when element acts like rectangular box or not.
2. none: Turn off the display of an element. Take out the space. Remove from the tree.
6. <display-legacy>
1. Content surrounding single inline with self block level.
1. inline-block
1. Accept height and width.
2. inline-table
3. inline-flex
4. inline-grid.

Ref:
1. https://css-tricks.com/almanac/properties/d/display/
2. https://developer.mozilla.org/en-US/docs/Web/CSS/display