CSS Display

0 3596

CSS Display is most important property. Every element has a default display value. The most of elements are usually block or inline.

Display values are: block, inline, inline-block, none

Display:block;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of display </title>
<style type="text/css">
p {
display: block;
background: # c50606;
padding: 5px;
}

</style>
</head>
<body>

<p> This paragraph is for see the example </p>

</body>
</html>

Display:inline;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of display inline </title>

<style type="text/css">
p {
display: inline;
background: # c50606;
padding: 5px;
}
</style>

</head>
<body>

<p> This paragraph is for see the example </p>

</body>
</html>

Display:inline-block;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of display inline block </title>
<style type="text/css">
ul li {
display: inline-block;
margin: 2px 10px;
}
</style>
</head>

<body>

<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>

</body>
</html>

Display:none;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example of display inline block </title>
<style type="text/css">
p {
display: none;
}
</style>
</head>

<body>

<ul> This paragraph is for see the example </ul>

</body>
</html>