Categories
CSS Web development

CSS Display Property

The CSS display property is the most important CSS property to control the layout.

The display property defines if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). 

Examples of the block-level elements: 

<div>

<h1>…<h6>

<p>

<form>

<header>

<footer>

<section>

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

Examples of the inline-level elements:

<span>

<a>

<img>

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

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

As I mentioned before, each 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 a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="https://lenadesign.org/html/" target="_blank">HTML</a></li>
  <li><a href="https://lenadesign.org/css/" target="_blank">CSS</a></li>
  <li><a href="https://lenadesign.org/javascript/" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Output:

The following example displays <span> elements as block elements:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>

</body>
</html>

Output:

The following example displays <a> elements as block elements: 

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<a href="https://lenadesign.org/html/" target="_blank">HTML</a>
<a href="https://lenadesign.org/css/" target="_blank">CSS</a>
<a href="https://lenadesign.org/javascript/" target="_blank">JavaScript</a>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Opacity / Transparency

CSS Shadows