CSS Display

CSS Display

CSS display is the most important property of CSS which is used to control the layout of the element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the webpage is a rectangular box and the CSS property defines the behavior of that rectangular box.

The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.

CSS display values

There are following CSS display values which are commonly used.

1) CSS display: inline;

The inline element takes the required width only. It doesn't force the line break so the flow of text doesn't break in inline example.

The inline elements are:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {
  display: inline;
  background: #8FBC8F;
  padding: 10px;
}
ul li {
    display: inline;
    margin: 10px;
}
</style>
</head>
<body>
<p>This paragraph element generates an inline box.</p>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>
</body>
</html>
Try it with the Editor

2) CSS display: inline-block;

The CSS display inline-block element is very similar to inline element but the difference is that you are able to set the width and height.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
div {
     display: inline-block;
     background: #90EE90;
     padding: 10px;
}
span {
     display: inline-block;        
     background: #F08080;
     padding: 10px;
}
</style>
</head>
<body>
<div>
<span>This span element and its parent div element generate an inline-block box.<span>
</div>
</body>
</html>
Try it with the Editor

3) CSS display: block;

The CSS display block element takes as much as horizontal space as they can. Means the block element takes the full available width. They make a line break before and after them.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
span {
    display: block;
    background: #F0E68C;
}
a {
   display: block;
   background: #90EE90;
}
</style>
</head>
<body>
<p>
<a href="http://tipsntrack.com/" target="_top">Visit tipsntrack.com<a>
<span>This span element generates a block box.<span>
</p>
</body>
</html>
Try it with the Editor

4) CSS display: run-in;

This property doesn?t work in Mozilla Firefox. These elements don't produce a specific box by themselves.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {  
display: run-in;   
}  
</style>
</head>
<body>
<p>Hello TipsnTrack.com</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
<p>Java Script Tutorial.</p>
</body>
</html>
Try it with the Editor

5) CSS display: none;

The "none" value totally removes the element from the page. It will not take any space.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   display: none;
} 
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The display: none simply causes an element to generate no boxes at all.</p>
<p>You can see that the Hello World! does not contain any space.</p>
</body>
</html>
Try it with the Editor