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
Block-level Elements and Block Boxes in CSS
Block-level elements are HTML elements that have their CSS display property set to block, list-item, or table. These elements force a line break before and after themselves, taking up the full width available and stacking vertically. Block-level elements generate block-level boxes, which participate in the block formatting context.
Syntax
selector {
display: block;
}
Block Container and Block Boxes
Block container boxes can contain either block-level boxes (following block formatting context) or inline-level boxes (following inline formatting context). When a block-level element is also a block container, it is called a block box.
Anonymous Block Boxes
Anonymous block boxes are automatically created by the browser when inline content appears alongside block-level elements. These boxes cannot be directly styled by developers as they have no corresponding HTML element.
Example: Block-Level Elements
The following example demonstrates block-level elements and their stacking behavior −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 70%;
margin: 0 auto;
text-align: center;
border: 2px solid #333;
padding: 10px;
}
.block-element {
height: 50px;
width: 100%;
color: white;
border: 3px solid black;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.block1 {
background-color: #FF8A00;
}
.block2 {
background-color: #F44336;
}
.block3 {
background-color: #9C27B0;
}
</style>
</head>
<body>
<div class="container">
<h3>Block-Level Elements Demo</h3>
<div class="block-element block1">Block Element 1</div>
<div class="block-element block2">Block Element 2</div>
<div class="block-element block3">Block Element 3</div>
</div>
</body>
</html>
Three colored rectangular blocks are displayed vertically stacked within a bordered container. Each block takes the full width available and has text centered inside: orange "Block Element 1", red "Block Element 2", and purple "Block Element 3".
Example: Anonymous Block Boxes
This example shows how anonymous block boxes are created when inline content surrounds block elements −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-container {
width: 400px;
margin: 20px auto;
padding: 15px;
border: 2px dashed #666;
}
.inner-block {
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="demo-container">
This is inline content before the block.
<div class="inner-block">This is a block element</div>
This is inline content after the block.
</div>
</body>
</html>
A dashed border container displays text "This is inline content before the block." at the top, followed by a green block with centered white text "This is a block element", and "This is inline content after the block." at the bottom. The inline content is automatically wrapped in anonymous block boxes.
Conclusion
Block-level elements create block boxes that stack vertically and take full available width. Understanding block formatting context and anonymous block boxes helps in creating effective CSS layouts and troubleshooting display issues.
2K+ Views
