Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Type of Boxes Generated in CSS
One or more boxes are generated for every element in a document tree after processing it under the 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 and takes the full available width
inline − Does not start on a new line and takes only the required width
The following types of boxes are generated in CSS −
Block-level Elements and Block Boxes
Anonymous block boxes
Inline-level Elements and Inline Boxes
Anonymous inline boxes
Syntax
selector {
display: block | inline | inline-block;
}
Block-level Elements and Block Boxes
Block-level elements generate block boxes that participate in block formatting context. Common block-level elements include <div>, <p>, <h1>-<h6>, <form>, and <fieldset>. These elements stack vertically and take up the full width of their container.
Example
The following example demonstrates block-level elements using div containers −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 20px auto;
padding: 10px;
border: 2px solid #333;
}
.child {
height: 50px;
width: 100%;
color: white;
border: 2px solid black;
margin: 5px 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.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>
<div class="container">
<div class="child">Block Element 1</div>
<div class="child">Block Element 2</div>
<div class="child">Block Element 3</div>
</div>
</body>
</html>
Three colored rectangular boxes are displayed vertically, each taking the full width of the container. The first box is orange, the second is red, and the third is violet, with white centered text.
Inline-level Elements and Inline Boxes
Inline-level elements generate inline boxes that participate in inline formatting context. Common inline elements include <span>, <a>, <strong>, and <em>. These elements flow horizontally within the text content and only take up as much width as needed.
Example
The following example demonstrates inline-level elements using span elements −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
border: 2px solid #333;
font-size: 18px;
line-height: 2;
}
.inline-child {
color: white;
border: 2px solid black;
padding: 5px 10px;
font-weight: bold;
}
.inline-child:nth-of-type(1) {
background-color: #FF8A00;
}
.inline-child:nth-of-type(2) {
background-color: #F44336;
}
.inline-child:nth-of-type(3) {
background-color: #C303C3;
}
</style>
</head>
<body>
<div class="container">
This is <span class="inline-child">Orange</span> colored text and this is <span class="inline-child">Red</span> colored text and finally <span class="inline-child">Violet</span> colored text.
</div>
</body>
</html>
Text flows horizontally with three inline colored elements embedded within the sentence. The inline elements (Orange, Red, Violet) appear on the same line as the surrounding text, each taking only the width needed for their content.
Anonymous Boxes
Anonymous boxes are generated automatically by the browser when certain conditions are met. Anonymous block boxes are created when inline content is mixed with block-level elements. Anonymous inline boxes are created for text nodes that are not contained within inline elements.
Conclusion
Understanding box types is fundamental to CSS layout. Block-level elements create vertical stacking layouts, while inline elements flow horizontally within text content. The CSS display property controls how elements generate boxes and participate in formatting contexts.
1K+ Views
