Explained: CSS Display Inline

Explained: CSS Display Inline
Explained: CSS Display Inline

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. 

ValueDescription
inlineelement 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> 
blockelement 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-blockelement displayed as an inline-level block containerheight and width can be applied
flexelement displayed as a block-level flex containerelement behaves like a block element the element lays out its content according to the flexbox model
inline-flexelement displayed as an inline-level flex containerelement behaves like an inline element the element lays out its content according to the flexbox model
gridelement displayed as a block-level grid containerelement behaves like a block element the element lays out its content according to the grid model
inline-gridelement displayed as an inline-level grid containerelement behaves like an inline elementthe element lays out its content according to the grid model
noneremoves the element completelydescendant elements also have their display as none
contentsdisappears the container
tableelements behave like <table> elementdefines a block-level box
inline-tableelement displayed as an inline-level tablebehaves like the <table> element in an inline box
table-columnelements behave like <col> element
table-rowelements behave like <tr> element
table-cellelements behave like <td> element
table-columnelements behave like <caption> element
table-column-groupelements behave like <colgroupl> element
table-row-groupelements behave like <tbody> element
table-header-groupelements behave like <thead> element
table-footer-groupelements behave like <tfoot> element
list-itemselement behaves like <li> element
run-indisplays the element as either block or inline, depending on the context
initialsets the property to its default value
inheritinherit 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:

blog banner 1

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 inlineCSS Display blockCSS Display inline-block
The element does not start on a new lineThe element starts on a new lineplaced as an inline element and behaves like a block element
Width and height cannot be setWidth and height can be setWidth 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

What is CSS display inline property?

CSS display inline is a property that displays the elements in a single line inside the current container.

How do I use the CSS display inline property?

By applying the display value as inline in the element.
display: inline;

What is CSS display inline-block property?

CSS display inline-block is a property that displays the elements as inline but with margin and padding on all four sides.

What is the use of CSS display property?

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