How to style display properties in CSS?

Display property in CSS

The display property is the most important property in CSS to control the layout of the web page. It provides the facility to display content of web pages in different varieties. The element div takes block as its default display while span takes inline as its default display. There are different modes of displaying elements and contents of web page. Let us see “How to style display properties in CSS?”

  • block display
  • inline display
  • inline-block display
  • none display

Block display in CSS

The block level display always starts with a new line and takes the full width of the browser available. It means, it stretches out to left and right as far as it can. The examples of block level elements are shown below:

<div>
<h1>, <h2>,---<h6>
<p>
<form>
<header>
<footer>
<section>

Let us write a code for display block elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:3px red solid;
            padding:5px 10px;
            margin:10px auto;
        }
        div#firstpara{
            display:block;
            border:2px solid green;
            margin:5px;        
        }
        div#secondpara{
            display:block;
            border:2px solid blue;
            margin:5px;                      
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="firstpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, maiores, a deserunt ipsa maxime similique distinctio fugit sapiente reiciendis ipsum architecto aperiam qui ducimus laboriosam laudantium sequi cumque autem recusandae sint magnam, atque temporibus. Accusantium quis sequi repudiandae dolores minima?
        </div>
        <div id="secondpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt delectus obcaecati dolores cum placeat eum, sint neque! Incidunt et adipisci minus, quibusdam error modi porro molestias neque molestiae dolorum repellendus eveniet atque aperiam eos exercitationem voluptate repellat ab facere sed!
        </div>
    </div>   
</body>
</html>
Block display in CSS

Inline display in CSS

The inline value of display property makes the content to display in a line in continuous manner. The inline element does not start with a new line and takes width as much as it is required. Examples of inline elements are:

<span>, <a>, <img>

Let us write a code of inline display to understand the concept in a better way.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:3px red solid;
            padding:5px 10px;
            margin:10px auto;
            width:50%;
        }
        div#firstpara{
            display:inline;
            margin:5px; 
            color:red;       
        }
        div#secondpara{
            display:inline;
            margin:5px; 
            color:green;                     
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="firstpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, maiores, a deserunt ipsa maxime similique distinctio fugit sapiente reiciendis ipsum architecto aperiam qui ducimus laboriosam laudantium sequi cumque autem recusandae sint magnam, atque temporibus. Accusantium quis sequi repudiandae dolores minima?
        </div>
        <div id="secondpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt delectus obcaecati dolores cum placeat eum, sint neque! Incidunt et adipisci minus, quibusdam error modi porro molestias neque molestiae dolorum repellendus eveniet atque aperiam eos exercitationem voluptate repellat ab facere sed!
        </div>
    </div>   
</body>
</html>
inline display in CSS, www.programmingtutorial.in

Inline-block display

The inline-block display property makes the block elements to display in one direction. The blocks are placed on same line with one block adjacent to other.

If you compare display inline-block property with display inline property, you will find that inline-block property also allow to set height and width of an element.

On the other hand, if you compare inline-block property with display block property, you will find that inline-block does not break a line after an element, so that the elements can display next to other element. Let us now write an HTML code with CSS to understand inline-block display property in a better way.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:3px red solid;
            padding:5px 10px;
            margin:10px auto;
            width:48%;
        }
        div#firstpara{
            display:inline-block;
            border:2px solid green;
            height:200px;
            width:200px;
            margin:5px; 
            color:rgb(16, 165, 66);
            padding:10px;        
        }
        div#secondpara{
            display:inline-block;
            border:2px solid rgb(25, 10, 110);
            height:200px;
            width:200px;
            margin:5px; 
            color:rgb(55, 12, 211); 
            padding:10px;                       
        }
        div#thirdpara{
            display:inline-block;
            border:2px solid rgb(204, 15, 125);
            height:200px;
            width:200px;
            margin:5px; 
            color:red; 
            padding:10px;                      
        }
        div.box{
            display:inline;
            margin:5px; 
            color:green;                     
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" id="firstpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt delectus obcaecati dolores cum placeat eum, sint neque! Incidunt et adipisci minus, quibusdam error modi porro molestias neque molestiae dolorum repellendus eveniet atque aperiam eos exercitationem voluptate repellat ab facere sed!
        </div>
        <div class="box" id="secondpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt delectus obcaecati dolores cum placeat eum, sint neque! Incidunt et adipisci minus, quibusdam error modi porro molestias neque molestiae dolorum repellendus eveniet atque aperiam eos exercitationem voluptate repellat ab facere sed!
        </div>
        <div class="box" id="thirdpara">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt delectus obcaecati dolores cum placeat eum, sint neque! Incidunt et adipisci minus, quibusdam error modi porro molestias neque molestiae dolorum repellendus eveniet atque aperiam eos exercitationem voluptate repellat ab facere sed!
        </div>
    </div>   
</body>
</html>
inline-block display, www.programmingtutorial.in