Home >>CSS Tutorial >CSS Display property

CSS Display property

CSS Display property

CSS Display Property is used to control the layout of the element and specifies how an element is displayed.

It has a default display value in Every HTML element depending on what type of element it is.

CSS display values

These are the following CSS display values.

  1. display: inline;
  2. display: inline-block;
  3. display: block;
  4. display: none;

1. CSS display inline

A new line element does not start in inline. It doesn't force the line break. It takes the required width only.

The inline elements are:

  • <span>
  • <a>
  • <em>
  • <b> etc.

Let's see an example of CSS display inline.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h4{  
display: inline;   
}  
</style>  
</head>  
<body>  
<h4>Hello Phptpoint </h4>  
<h4>HTML Tutorial</h4>  
<h4>CSS Tutorial</h4> 
<h4>C Tutorial</h4>  
<h4>SQL Tutorial</h4>  
</body>  
</html> 
Output :


Hello Phptpoint

HTML Tutorial

CSS Tutorial

C Tutorial

SQL Tutorial

 

2. CSS display inline-block

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

Let's see the example of CSS display inline-block:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h4 {  
display: inline-block;   
}  
</style>  
</head>  
<body>  
<h4>Hello Phptpoint</h4>  
<h4> HTML Tutorial. </h4>  
<h4> CSS Tutorial </h4>  
<h4>SQL Tutorial.</h4>  
<h4>C++ Tutorial.</h4>  
</body>  
</html>
Output :


Hello Phptpoint

HTML Tutorial.

CSS Tutorial

SQL Tutorial.

C++ Tutorial.

3. CSS display block

The CSS display block element always starts on a new line and takes up the full available width as much as horizontal space as they can.

Let's take an example of CSS display block:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h4 {  
display: block;   
}  
</style>  
</head>  
<body>  
<h4>Hello Phptpoint</h4>  
<h4>Java Tutorial.</h4>  
<h4>SQL Tutorial.</h4>  
<h4>HTML Tutorial.</h4>  
<h4>CSS Tutorial.</h4>  
</body>  
</html> 
Output :


Hello Phptpoint

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

4. CSS display none

The "none" value is commonly used to hide and show elements without recreating and deleting them by using JavaScript. It totally removes the element from the page.

Let's take an example of CSS display-none:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.hidden {  
    display: none;  
}  
</style>  
</head>  
<body>  
<h1>This heading is visible.</h1>  
<h1 class="hidden">This is not visible.</h1>  
<p>You can see that the hidden heading does not contain any space.</p>  
</body>  
</html>
Output :


This heading is visible.

This is not visible.

You can see that the hidden heading does not contain any space.

Other CSS Display values:

Property-Value Description
Flex Flex is used to display a block level flex container in an element.
inline-flex Inline-flex is used to display a inline-level flex container in an element.
inline-table Inline-table is used to display an inline-level table in an element.
list-Item It represent an item in a list & displays an item in a bullet points.
Table It display an element in a table format.
table-caption Table-caption is used to display an element in a Caption.
table-column-group Table-column-group is used to display an element in a column-group.
table-header-group It is used to display an element in a table-header-group
table-footer-group It is used to display an element in a <tfoot>.
table-row-group It is used to display an element in a <tbody>.
table-cell It is used to display an element in a <td>.
table-row It is used to display an element in a <tr>.
table-column It is used to display an element in a <col>.

Popular Tutorials