The display is the CSS’s most important property for controlling layout. Every element has a default display value depending on it’s type. The default for most element is block or inline.

The div element has a default display of block and a span element has a default display of inline.

Block Element

A block element is an HTML element that begins a new line on a web page and extends the full width of the available horizontal space of it’s parent element.

div is the standard block-level element. Other common block-level elements are p and form, and the new HTML5 elements like header, footer, section etc.

Inline Element

span is the standard inline element. An inline element can wrap some text inside a div, for e.g. <span> here some inline content goes </span> without disrupting or breaking the flow of that div element.

The other most common inline element is the a element which is used for creating hyper links.

none

none is another common display value. Some specialized elements such as script use this as their default. It is very commonly used with JavaScript to hide and show elements without really deleting and recreating them.

Do note however that this is different from visibility property.

Setting display to none will render the page as though the element does not exist whereas visibility: hidden, will hide the element, but the element will still take up space as it if it was fully visible.

Exhaustive list of values can be found here (but we will cover important items as we progress ahead in the course).

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Override

You can override the default display type. Though it won’t make sense to make an div inline, but you can use it in situations as needed .

A common example is making inline li elements for horizontal menus or breadcrumbs navigation.

Now before we get into the examples of this, the first and foremost thing to understand is the CSS Box model .

Please head over to next section.