CSS Display

The display property is the most important CSS property which controls the layout of a web page. Each HTML element has a default display value either block or inline depending on what type of element it is. You can use CSS property display to change the default value to any one among inline, block, inline-block, none while there are far more values to suggest the layout.

a{
  display: block;
}

Display Block

A block-level element always starts on a new line and takes up the full width of the screen stretching from the left end to the right end of the screen. Examples of block level elements are as follows.

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
<article>
<aside>

Display Inline

An inline element does not start on a new line and only takes up as much width as necessary for the content to appear on the screen. Examples of inline elements are as follows.

<span>
<a>
<img>

Display None

CSS property display with value none is used to hide elements from the browser. Most of the times, they are hidden to make them appear on user interactions like click or hover.

p{
  display: none;
}

Visibility Hidden

An HTML element can be hidden using CSS property visibility with value hidden too. The only difference would be element with visibility hidden will be hidden but the space occupied by the element will be reserved while any element hidden with CSS property display none will not take up any space on the page. Visibility can have value visible too.

This is an element with CSS property visibility added with value hidden.

This is an element with CSS property display added with value none.

<h3>This is <span style="visibility: hidden;">an element</span> with CSS property visibility added with value hidden.</h3>
<h3>This is <span style="display: none">an element</span> with CSS property display added with value none.</h3>

Display Inline-block

An element with CSS property display with value inline-block is identical to inline elements in appearance but can also have properties that a block element can have like margins and paddings which are not supported for inline elements.

a{
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  background: red; 
}

Display inline-block is most often used to create navigation lists in a web page where all the li elements are aligned horizontally instead of the default vertical appearance.

ul li {
  display: inline-block;
  font-size: 20px;
  padding: 5px 10px;
}

0 Like 0 Dislike 0 Comment Share Tweet