Type of Boxes Generated in CSS


One or more boxes are generated for every element in a document tree after processing it under visual formatting model. A generated box has certain CSS properties associated with it and is accordingly rendered in HTML. To display elements, the following are the two common values −

  • block − Starts on a new line. Takes the full available width

  • Inline − Does not start on a new line. Tales only the required width

The following boxes are generated in CSS −

  • Block-level Elements and Block Boxes

  • Anonymous block boxes

  • Inline-level Elements and Inline Boxes

  • Anonymous inline boxes

Block-level elements and Black Boxes

Let’s see an example of Block-level Elements and Block Boxes. The block-level elements we will use are: <form>, <fieldset>, <div>, etc.

Begin with creating a div parent container with some child containers −

<div id="container">Color Orange
   <div class="child"></div>Color Red
   <div class="child"></div>Color Violet
   <div class="child"></div>
</div>

Now, set the height and width of the child containers −

.child{
   height: 40px;
   width: 100%;
   color: white;
   border: 4px solid black;
}

Set the colors for the child containers. You can use the nth-of-type() pseudo class −

.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <title>CSS Block-level Elements and Block Boxes</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
         box-sizing: border-box;
         /*margin:5px;*/
      }
      input[type="button"] {
         border-radius: 10px;
      }
      .child{
         height: 40px;
         width: 100%;
         color: white;
         border: 4px solid black;
      }
      .child:nth-of-type(1){
         background-color: #FF8A00;
      }
      .child:nth-of-type(2){
         background-color: #F44336;
      }
      .child:nth-of-type(3){
         background-color: #C303C3;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS Block-level Elements and Block Boxes</legend>
         <div id="container">Color Orange
            <div class="child"></div>Color Red
            <div class="child"></div>Color Violet
            <div class="child"></div>
         </div><br>
      </fieldset>
   </form>
</body>
</html>

Inline-level elements and inline boxes

Let’s see an example for Inline-level Elements and Inline Boxes. The inline-level element we will used here is <span>. Set the inline element in the <div>. We have set the <span> inside the <div> −

<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div>

Set the colors for the child containers set inside the parent <div>. You can use the nth-of-type() pseudo class −

.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <title>CSS Inline-level Elements and Inline Boxes</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      .child{
         color: white;
         border: 4px solid black;
      }
      .child:nth-of-type(1){
         background-color: #FF8A00;
      }
      .child:nth-of-type(2){
         background-color: #F44336;
      }
      .child:nth-of-type(3){
         background-color: #C303C3;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS Inline-level Elements and Inline Boxes</legend>
         <div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
      </fieldset>
   </form>
</body>
</html>

Updated on: 02-Jan-2024

996 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements