Back to: CSS Tutorials for Beginners and Professionals
CSS Display Property with Examples
In this article, I am going to discuss Display Property in CSS with Examples. Please read our previous article where we discussed CSS Height and Width Properties with Examples. The display property is the most important CSS property for controlling layout.
CSS Display Property
Have you ever wondered why some elements on a page are displayed next to each other while others are displayed one below the other? This is because their ‘Display Property’ has been set to that.
The Display property in CSS is used to set the display of an element. It manages and alters the way the HTML elements are shown on the web page. It is used to define how the elements behave while being exactly where they are. Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.
The CSS Display Property specifies the display behavior (the type of rendering box) of an element. That means the display property specifies if/how an element is displayed. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
Block-level vs Inline Elements
The CSS Display Property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid, or flex.
Block-level elements are rendered as a block and hence take up all the available horizontal space. You can set margin-top and margin-bottom, and two block-level elements will render in two different lines. Some examples are: <div>, <section>, <article>, <nav>, <h1>, <h2> etc. and p.
Inline elements on the other hand only take up the space they require to fit their content in. Hence two inline elements will fit into the same line (if the combined content doesn’t take up the entire space in which case a line break would be added).
Setting width or height on an inline element also has no effect. The width and height are auto to take as much space as required by the content. Some examples are: <a>, <span>, <img>
Example to Understand CSS Display Property
To understand the CSS Display Property concept more clearly, we are going to make some changes i.e. adding menus at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="code.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html">CSS Tutorials</a>
</div>
<nav class="main-nav">
<ul class="man-nav__items">
<li class="main-nav__item">
<a href="index.html">Plan</a>
</li>
<li class="main-nav__item">
<a href="index.html">Feedback</a>
</li>
<li class="main-nav__item">
<a href="index.html">Start Learning</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
</section>
</main>
</body>
</html>
Output
Now, if you inspect the elements of the page like the li or anchor tag you can clearly see that the li tag is taking full width (the blue area).
The anchor<a> tag is taking as much width as its content needs.
The display property allows us to change the behavior of an element from block to inline or even to inline-block which is a mixture or to none to remove it from the DOM even. The syntax is as follows:
display: block
display: inline
As we already know anchor tag is an inline element. So, if we have two anchor tags next to each other it will rendered in the same line as shown below (Teachers Teachers):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="code.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html">
CSS Tutorials
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
<a href="index.html">Courses</a>
</li>
<li class="main-nav__item">
<a href="index.html">Teachers</a>
<a href="index.html">Teachers</a>
</li>
<li class="main-nav__item">
<a href="index.html">Start Learning</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="product-overview">
<h1>
Get the freedom to learn from anywhere, anytime
</h1>
</section>
</main>
</body>
</html>
Output:
Now, let’s change the second Teachers anchor tag to the block element and see the difference in output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="code.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html">
CSS Tutorials
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
<a href="index.html">Courses</a>
</li>
<li class="main-nav__item">
<a href="index.html">Teachers</a>
<a href="index.html" style="display: block">Teachers</a>
</li>
<li class="main-nav__item">
<a href="index.html">Start Learning</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="product-overview">
<h1>
Get the freedom to learn from anywhere, anytime
</h1>
</section>
</main>
</body>
</html>
Output:
The default value for an anchor tag would be inline but here, I change it to block. If we do that and when we reload the page, you actually see that these second Teachers jumped into a new row because Teachers the second one, is now turned into a block-level element and hence, it behaves like one. It takes the full entire width, the first one still is an inline element but that doesn’t matter because the second one is a block-level, it doesn’t fit into the same line like the first one even though that one is still inline but the second one isn’t.
display: none
If we set this on the second Teachers and we reload, we’ll see it’s removed and it’s not only invisible or transparent, it’s also taken out of the document flow.
<li class=”main-nav__item”>
<a href=”index.html”>Teachers</a>
<a href=”index.html” style=”display: none”>Teachers</a>
</li>
Output:
It’s still part of the DOM, so it’s not removed from there, just from the invisible document flow. The idea behind display none is that it’s especially useful if we use it in conjunction with JavaScript to for example show it after a button was clicked, this allows us to create models that only show up on certain actions.
CSS display:inline-block Property
This mixes the behavior of both inline and block-level elements. Like inline elements, these elements can go next to each other now but they still behave like block-level elements when it comes to setting top and bottom margins, setting paddings, things that are not possible on inline elements.
.main-nav__item{
display: inline-block;
}
The complete code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
.main-nav__item{
display: inline-block;
}
</style>
</head>
<body>
<header class="main-header">
<div>
<a href="index.html">
CSS Tutorials
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
<a href="index.html">Courses</a>
</li>
<li class="main-nav__item">
<a href="index.html">Teachers</a>
<a href="index.html" style="display: none">Teachers</a>
</li>
<li class="main-nav__item">
<a href="index.html">Start Learning</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="product-overview">
<h1>
Get the freedom to learn from anywhere, anytime
</h1>
</section>
</main>
</body>
</html>
Output:
Difference between display: none and visibility: hidden
display: none – this value removes the element to which you apply it from the document flow. This means that the element is not visible and it also doesn’t “block its position”. Other elements can take their place instead.
There is an alternative to that though. If you only want to hide an element but you want to keep its place (i.e. other elements don’t fill the empty spot), we can use visibility: hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
.main-nav__item{
display: inline-block;
}
</style>
</head>
<body>
<header class="main-header">
<div>
<a href="index.html">
CSS Tutorials
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
<a href="index.html">Courses</a>
</li>
<li class="main-nav__item">
<a href="index.html"style="visibility:hidden">Teachers</a>
</li>
<li class="main-nav__item">
<a href="index.html">Start Learning</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="product-overview">
<h1>
Get the freedom to learn from anywhere, anytime
</h1>
</section>
</main>
</body>
</html>
Output:
Note: The Display property in CSS defines how the components (div, hyperlink, heading, etc.) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.
Important Properties of Display Attribute in CSS:
- Block: This property is used as the default property of div. This property places the div one after another vertically. The height and width of the div can be changed using the block property if the width is not mentioned, then the div under the block property will take up the width of the container.
- Inline: This property is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user.
- Inline-block: This feature uses both properties mentioned above, block and inline. So, this property aligns the div inline but the difference is it can edit the height and the width of the block. Basically, this will align the div both in the block and inline fashion.
Points to Remember:
- The Display property in CSS is used to set the display of an element.
- It manages and alters the way the HTML elements are shown on the web page.
- The default display value for most of the elements is either block or inline.
- The most important property values are inline, block, inline-block, and none.
In the next article, I am going to discuss Pseudo Classes and Elements in CSS with Examples. Here, in this article, I try to explain Display Property in CSS with Examples. I hope this CSS Display Property with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
