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
Understanding CSS Visual Formatting
Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model.
The layout of generated boxes depends on several properties such as −
Dimensions − Width and height of the element
Type − Block-level, inline-level, or inline-block
Positioning − Normal flow, absolute, relative, or float
Document tree relationships − Child and sibling elements
External Information − Viewport size, image dimensions, etc.
CSS Box Generation Types
CSS processes elements into two main types of boxes −
Block-level boxes − Force line breaks before and after, occupy full available width
Inline-level boxes − Flow with text content, only occupy necessary width
Block-Level Box Generation
Block-level elements create boxes that force line breaks above and below themselves and take up the full available width. Common block-level elements include <div>, <h1>-<h6>, <p>, and <form>.
Example: Block Elements Layout
This example demonstrates how block-level elements stack vertically and occupy full width −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 20px auto;
border: 2px solid #333;
}
.block-element {
padding: 15px;
margin: 10px 0;
border: 2px solid #666;
text-align: center;
color: white;
}
.block1 { background-color: #FF6B35; }
.block2 { background-color: #004E89; }
.block3 { background-color: #009639; }
</style>
</head>
<body>
<div class="container">
<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 appear stacked vertically, each taking the full width of the container with line breaks between them.
Inline-Level Box Generation
Inline-level elements create boxes that flow with text content and only take up the width necessary for their content. They do not force line breaks. Common inline elements include <span>, <em>, <strong>, and <a>.
Example: Inline Elements Layout
This example shows how inline elements flow horizontally within text content −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
border: 2px solid #333;
line-height: 1.6;
}
.inline-element {
padding: 5px 10px;
border: 2px solid #666;
color: white;
}
.inline1 { background-color: #FF6B35; }
.inline2 { background-color: #004E89; }
.inline3 { background-color: #009639; }
</style>
</head>
<body>
<div class="container">
This text contains <span class="inline-element inline1">inline element 1</span> and
<span class="inline-element inline2">inline element 2</span> and
<span class="inline-element inline3">inline element 3</span> flowing naturally within the paragraph.
</div>
</body>
</html>
Text flows normally with three colored inline elements embedded within it, taking only the space needed for their content without breaking the line flow.
Conclusion
CSS visual formatting determines how elements are laid out on a page through the box model. Understanding the difference between block-level and inline-level elements is fundamental for controlling layout and text flow in web pages.
326 Views
