CSS display
Display and OverflowIn this lesson, we will learn all the values of the CSS display property with clear examples, making it easy for you to understand and apply in your web development projects.
CSS display Property
The CSS display property allows you to control the layout and visibility of HTML elements. This property determines how an element is displayed on a web page. It can significantly impact the layout and structure of your content.
Here is the list of commonly used display values.
- block
- inline
- inline-block
- none
block
Elements with display: block; value occupy the entire width of their parent container and stack on top of each other vertically. You can set the width and height property of a block element. Common block elements include <div>, <p>, <h1>, etc.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS display: block Example</title>
<!-- Internal CSS -->
<style>
div {
width: 300px;
height: 150px;
background-color: yellow;
}
p {
width: 100px;
background-color: violet;
}
span {
display: block;
width: 200px;
text-align: center;
color: white;
background-color: red;
}
</style>
</head>
<body>
<div>
<p>This is a sample paragraph.</p>
</div>
<span>This is another sample paragraph.</span>
</body>
</html>inline
Elements with display: inline; value only take up as much width as necessary and flow alongside each other horizontally. You can not set the width and height property of inline element unless you change the element to block element using display: block; or display: inline-block;. Common inline elements include <span>, <a>, <strong>, etc.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS display: inline Example</title>
<!-- Internal CSS -->
<style>
span {
background-color: yellow;
}
ol {
padding-left: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<p>This is a <span>sample</span> paragraph.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>inline-block
Elements with display: inline-block; value combines the characteristics of both inline and block elements. It allows elements to flow horizontally like inline elements while maintaining the ability to set width and height properties, just like block elements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS display: inline-block Example</title>
<!-- Internal CSS -->
<style>
ol {
padding-left: 0;
}
li {
display: inline-block;
padding: 0 8px;
line-height: 30px;
color: white;
background-color: #0C67A0;
}
</style>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>none
Elements with display: none; value hides itself entirely from the page making it as if the element doesn't exist on the page. This is commonly used for hiding elements that you want to show or hide dynamically using JavaScript or CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS display: none Example</title>
<!-- Internal CSS -->
<style>
#p1 {
display: none; /* change the value to block, inline, or inline-block to make it visible */
}
</style>
</head>
<body>
<p id="p1">This is a sample paragraph 1.</p>
<p>This is a sample paragraph 2.</p>
</body>
</html>