Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Working with Display Block in CSS

CSS Web Development Front End Technology

The CSS Display property with value block renders an element with parent?s full width available, it also forces a line break. An element with display as block renders as a <div> or <p> element. Let us see the syntax with some examples for the display block.

Syntax

The following is the syntax of CSS display block −

Selector {
   display: block;
}

Display block

Let?s see an example of CSS display block. The display block displays an element as a block element −

em{
   background-color: #C303C3;
   color: #fff;
   display:block;
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <title>CSS Display Block</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
         margin:5px;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      em{
         background-color: #C303C3;
         color: #fff;
         display:block;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS-Display-Block</legend>
         <label for="textSelect">Formatter: </label>
         <input id="textSelect" type="text" placeholder="John Doe">
         <input type="button" onclick="convertItalic()" value="Check">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
   <script>
      var divDisplay = document.getElementById("divDisplay");
      var textSelect = document.getElementById("textSelect");
      function convertItalic() {
         for(i=0; i<2; i++){
            var italicObject = document.createElement("EM");
            var italicText = document.createTextNode(textSelect.value);
            italicObject.appendChild(italicText);
            divDisplay.appendChild(italicObject);
         }
      }
   </script>
</body>
</html>

Display inline block

Let?s see another example of CSS Display inline block. Display an element as an inline-level block container with the inline-block property −

.inline-block {
   display: inline-block;
   background-color: mintcream;
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      #flex {
         display: flex;
      }
      #none {
         display: none;
      }
      .inline-block {
         display: inline-block;
         background-color: mintcream;
      }
      .grid {
         display: grid;
         background-color: cornflowerblue;
      }
      div {
         margin: 30px;
         padding: 5px;
         height: 10px;
         line-height: 5px;
         text-align: center;
         background-color: lightblue;
         border: 2px solid black;
      }
      div > div {
         background-color: lightpink;
         border: 2px solid green;
      }
      div > div > div {
         background-color: sandybrown;
         border: 2px solid darkred;
      }
   </style>
</head>
<body>
   <div><span id="flex">heyyy</span>
      <div><span id="none">heyyy</span>
         <div>
            <span class="inline-block">heyyy</span>
            <span class="inline-block">heyyy</span>
            <div>
               <span class="grid">heyyy demo</span>
               <span class="grid">heyyy demo</span>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

Responsive block

In this example, the team member details are given. When the web browser is resized to mobile-view, the media queries concept is used the display property is set to block −

@media screen and (max-width: 650px) {
  .teamColumn {
      width: 100%;
      display: block;
   }
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      html {
         box-sizing: border-box;
      }
      body{
         font-family: monospace,serif,sans-serif;
      }
      img{
         height: 300px;
         width: 100%;
      }
      *, *:before, *:after {
         box-sizing: inherit;
      }
      .teamColumn {
         float: left;
         width: 33.3%;
         margin-bottom: 16px;
         padding: 0 8px;
      }
      @media screen and (max-width: 650px) {
         .teamColumn {
            width: 100%;
            display: block;
         }
      }
      
      .teamCard {
         background-color: rgb(162, 162, 255);
         text-align: center;
         font-size: 20px;
      }
      .personContainer {
         padding: 0 16px;
      }
      .personContainer::after, .teamContainer::after {
         content: "";
         clear: both;
         display: table;
      }
      .Designation {
         color: rgb(15, 0, 100);
         font-weight: bolder;
         font-size: 40px;
      }
      .contact {
         border: none;
         outline: 0;
         display: inline-block;
         padding: 12px;
         color: white;
         font-weight: bolder;
         background-color: rgb(78, 0, 102);
         text-align: center;
         cursor: pointer;
         width: 100%;
      }
      .contact:hover {
         background-color: #555;
      }
   </style>
</head>
<body>
   <h1 style="text-align: center;">Responsive Meet the team example </h1>
   <div class="teamContainer">
      <div class="teamColumn">
         <div class="teamCard">
            <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >
            <div class="personContainer">
               <h2>Jane Doe</h2>
               <p class="Designation">CTO</p>
               <p><button class="contact">Contact</button></p>
            </div>
         </div>
      </div>
      <div class="teamColumn">
         <div class="teamCard">
            <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <div class="personContainer">
               <h2>Mike Ross</h2>
               <p class="Designation">Front End Developer</p>
               <p><button class="contact">Contact</button></p>
            </div>
         </div>
      </div>
      <div class="teamColumn">
         <div class="teamCard">
            <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <div class="personContainer">
               <h2>John Doe</h2>
               <p class="Designation">FullStack Developer</p>
               <p><button class="contact">Contact</button></p>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
Updated on: 2023-12-26T15:45:48+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements