Table of Contents
Introduction
Anyone who wants to master front-end web development should have a strong knowledge of the CSS Display property. It is one of the most commonly used CSS properties and is the backbone of web layout implementation.
The display property controls the page layout by defining the display of the different parts of a web page. It specifies how a component should be treated and the layout used for its children.
Every HTML component has a default display value determined by the HTML specifications or user default style sheet. The default display value for most components is block or inline.
Syntax:
display: value;
This blog will go through the various values for CSS display property and describe how it affects the web page layout. Let’s get started!
Display Values
The various display values in CSS determine how the web page layout would look. Here is the list of various display values, along with their behaviour.
Value | Description |
inline | element displayed as an inline element similar to <span>does not start on a new lineThe element only takes up the required width Not affected by height and width propertiesdefault property of <a>, <span>, <img> |
block | element displayed as a block element similar to <p>starts on a new linetakes up the whole widthdefault property of <div>,<h1>…<h6>,<form>, <footer>, <header>, <section>, <p> |
inline-block | element displayed as an inline-level block containerheight and width can be applied |
flex | element displayed as a block-level flex containerelement behaves like a block element the element lays out its content according to the flexbox model |
inline-flex | element displayed as an inline-level flex containerelement behaves like an inline element the element lays out its content according to the flexbox model |
grid | element displayed as a block-level grid containerelement behaves like a block element the element lays out its content according to the grid model |
inline-grid | element displayed as an inline-level grid containerelement behaves like an inline elementthe element lays out its content according to the grid model |
none | removes the element completelydescendant elements also have their display as none |
contents | disappears the container |
table | elements behave like <table> elementdefines a block-level box |
inline-table | element displayed as an inline-level tablebehaves like the <table> element in an inline box |
table-column | elements behave like <col> element |
table-row | elements behave like <tr> element |
table-cell | elements behave like <td> element |
table-column | elements behave like <caption> element |
table-column-group | elements behave like <colgroupl> element |
table-row-group | elements behave like <tbody> element |
table-header-group | elements behave like <thead> element |
table-footer-group | elements behave like <tfoot> element |
list-items | element behaves like <li> element |
run-in | displays the element as either block or inline, depending on the context |
initial | sets the property to its default value |
inherit | inherit property from its parent element |
Some Examples
In the example, there are two block-level container divs, each one with three inline children. Padding and different background colours have been applied to understand the effect of the display values better.
Basic Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Display</title>
<style>
/* properties for the container div */
.container {
/* display: value; */
margin: 10px;
background-color: orange;
}
/* properties for the span element inside the container div */
.container span{
background-color: black;
color: white;
margin: 5px;
}
/* padding for the span and container div */
.container, span {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<span>HTML</span>
<span>CSS</span>
<span>JS</span>
</div>
<div class="container">
<span>HTML</span>
<span>CSS</span>
<span>JS</span>
</div>
</body>
</html>
Output without any display property:
Let’s look at some examples to understand how the different display value works when the property is applied to the container div.
1. Inline
Element is displayed as an inline element, and they appear on the same line as the elements near it.
display: inline;
Output:
2. Block
Element starts on a new line and fills up the horizontal space left and right on the web page.
display: block;
Output:
3. Inline-block
Elements appear similar to inline elements, except that they can have margins and paddings added on all four sides.
.container {
display: inline-block;
width: 80vw;
}
Note: The width property can be applied here.
Output:
4. Flex
The element behaves like a block element and lays out its content according to the flexbox model.
display: flex;
5. Inline-flex
Element is displayed as an inline-level flex container.
display: inline-flex;
Output:
6. Grid
Grid Layout offers a grid-based layout, with rows and columns. An element becomes a grid container when its display property is set to grid.
display: grid;
Output:
7. CSS Display inline-grid
Element is displayed as an inline-level grid container.
display: inline-grid;
Output:
8. None
The element is removed completely.
display: none;
Output:
9. Contents
It causes the element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself.
display: contents;
Output:
10. Table
Elements behave like the <table> element.
display: table;
Output:
11. Inline-table
Elements are displayed as an inline-level table.
display: inline-table;
Output:
12. List-items
The element behaves like the <li> element.
display: list-items;
13. Initial
The element is set to its default value.
display: initial;
14. Inherit
The element inherits properties from its parent element.
display: inherit;
Display: None vs Visibility: Hidden
The CSS display none property is commonly used with JavaScript to hide and show elements without deleting and recreating them. It removes the element as if the element never existed.
The CSS display visibility property also hides the element, but the element will still take up the same space as before.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hide Element</title>
<style>
.displayNone {
display: none;
}
.visibilityHidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>CSS Display None Property</h1>
<h3 class="displayNone">Heading tag with display none property</h3>
<h3>Heading tag is hidden and it does not take up any space</h3>
<h1>CSS Visibility Hidden Property</h1>
<h3 class="visibilityHidden">Heading tag with visibility none property</h3>
<h3>Heading tag is hidden but it takes up space</h3>
</body>
</html>
Output:
CSS Display Inline vs. CSS Display Block vs. CSS Display Inline-block
The difference between CSS Display inline property, CSS block, and CSS Display inline-block property are:
CSS Display inline | CSS Display block | CSS Display inline-block |
The element does not start on a new line | The element starts on a new line | placed as an inline element and behaves like a block element |
Width and height cannot be set | Width and height can be set | Width and height can be set |
Browser Compatibility
The following browser has complete support for display property:
- Google Chrome 4.0
- Firefox 3.0
- Internet Explorer 8.0
- Safari 3.1
- Opera 7.0
Note:
- “flex” and “inline-flex” is used in Safari using the -webkit- prefix
- “contents” does not work in Edge prior to version 79
Frequently Asked Questions
CSS display inline is a property that displays the elements in a single line inside the current container.
By applying the display value as inline in the element.
display: inline;
CSS display inline-block is a property that displays the elements as inline but with margin and padding on all four sides.
Every element on a web page is a rectangular box. The display property in CSS determines how these rectangular boxes should behave.
Key Takeaways
This blog covered the various display values along with examples to show how different display values work. Don’t stop here! Check out this amazing blog on the Best CSS properties for a frontend developer.
“Perfection is achieved not when there is nothing more to add, but rather when there is nothing more to take away.” – Antoine de Saint-Exupery
By Hari Sapna Nair
Leave a Reply