CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Layout - The display Property

The display property is the most important CSS property for controlling layout.


The display Property

The display property specifies the type of rendering box used for an element.

The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block-level, while the <span> element is displayed inline-level.


Block-level Elements

By default, block-level elements begin on new lines.

A block-level element occupies the entire space of its parent element (container), thereby creating a "block".

The <div> element is a block-level element.

The following is a complete list of all HTML block-level elements:


Inline Elements

An inline-element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

The following elements are inline by default:


Display none

The display: none; is commonly used with JavaScript to hide elements without deleting them.

Run code

Override Default Display Value

Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-level element.

The following example displays list items as inline elements and link elements as block elements:

Run code

Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting either display: none; or visibility:hidden;.

By using display property the element will be hidden, and the page will be displayed as if the element is not there.

The visibility property also hides an element, however, the element will still take up the same space as before.

display: none;
visibility: hidden;
Reset
Run code

Display: block vs inline-block vs inline

  • Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
  • Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
  • Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different between in display: inline, display: inline-block and display: block:

Run code

Display Property Values

The display property can have following values:

Value Description
inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex Displays an element as a block-level flex container
grid Displays an element as a block-level grid container
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex Displays an element as an inline-level flex container
inline-grid Displays an element as an inline-level grid container
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a <li> element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a <table> element
table-caption Let the element behave like a <caption> element
table-column-group Let the element behave like a <colgroup> element
table-header-group Let the element behave like a <thead> element
table-footer-group Let the element behave like a <tfoot> element
table-row-group Let the element behave like a <tbody> element
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element
none The element is completely removed