HOLLA TECH - LEARN

display: block
 

Every element on a web page is a rectangular box.The display property determines how that rectangular box behaves. A block element is an element that takes up the fullest width available, with line breaks before and after.
The style rules in the following example display the inline <span> elements as block-level elements:

The HTML:

<span>First paragraph.</span>
<span>Second paragraph.</span>
<span>Third paragraph.</span>
<span>Fourth paragraph.</span>
<span>Fifth paragraph.</span>

 

The CSS: 

span {
   display: block;
}

 

Result: 

Holla Tech - Learn CSS


display: inline
 

An inline element only takes up as much width as necessary, and does not force line breaks.
The CSS:

 

p {
   display: inline;
}

 

The code above will produce the following result:

Holla Tech - Learn CSS

NOTE!
Setting the display property of an element only changes how the element is displayed, not what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside it.

display:none
 

display:none hides an element, so it does not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.

The HTML:

<h1>This text will not display, as we set the value to none.</h1>
<p>Headline of this paragraph is not displayed, as we set the value to none.</p>

 

The CSS: 

h1 {
   display: none;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
There are plenty of other display values, such as list-item, table, table-cell, table-column, grid, etc. Just play with values to see the difference.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT