The Display Property in CSS Layout

CSS Layout - The display Property

The display property plays a very important role in controlling CSS layout.

The display Property

The display the property specifies how to display an element. Every HTML element has a default display value depending on the type of element. There are two default display values for most of the elements one is block and other is inline.

Block-level Elements

The main feature of a block-level element is that it always starts on a new line and takes up the full width available.

Block Element

Block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline Elements

Sometimes we want to place an element which should take up only a limited portion of the screen then we use Inline Elements. It does not start on a new line and only takes up as much width as needed.

Inline elements:

• &th;span>
• <a>
• <img>

Inline Block

Display: none

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

The <script > element uses display: none; as default. 

Overriding The Default Display Value

Every element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa, can be useful for making the page look in a different way, and still follow the web standards.

To make a list element inline <li> elements for horizontal menus:

li {
  display: inline;
}

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 another block elements inside it.

To displays <span> elements as block elements:

span {
  display: block;
}

The example displays <a> elements as block elements:

a {
  display: block;
}

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

display:none;

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

h1.hidden {
  display: none;
}

visibility:hidden;

It  also hides an element. But, the element will still take up the same space as before. The element will be hidden, and the space remains reserved by the element in the layout:

h1.hidden {visibility: hidden;}

See Also: Padding in CSS      Margin In CSS