CSS Display Property

To understand more web page layout you can back to the older posts (click here and here). Today we will concentrate on CSS layout - on display property. The display property is the most important CSS property to controlling layout.

CSS Layout

The display property specifies 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 is 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 <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>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" 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>

<p>Display links as block elements:</p>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>

Output:



Enjoy coding!



Comments

Popular Posts