It is the most important property of CSS which is used to control the layout of the element. 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. Every element on the webpage is a rectangular box and the CSS property defines the behavior of that rectangular box.
Below the CSS display values which are commonly used.
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:
<span><b><a>See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Display Inline</title>
<style>
p {
display:inline;
}
</style>
</head>
<body>
<p>Php Tutorial.</p>
<p>Sql Tutorial</p>
<p>Vuejs Tutorial</p>
</body>
</html>
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.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Display Inline Block</title>
<style>
p {
display:inline-block;
}
</style>
</head>
<body>
<p>Php Tutorial.</p>
<p>Sql Tutorial</p>
<p>Vuejs Tutorial</p>
</body>
</html>
The CSS display block element displays an element as a block element (like <p>).It starts on a new line, and takes up the whole width.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Display Block</title>
<style>
p {
display:block;
background:#eeeeee;
}
</style>
</head>
<body>
<p>Php Tutorial.</p>
<p>Sql Tutorial</p>
<p>Vuejs Tutorial</p>
</body>
</html>
The CSS display none element is completely removed.It'll not take any space.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Display None</title>
<style>
p {
display:none;
}
</style>
</head>
<body>
<h1>This is a Heading.</h1>
<p>Php Tutorial.</p>
<p>Sql Tutorial</p>
<p>Vuejs Tutorial</p>
</body>
</html>