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
Inline-level Elements and Inline Boxes in CSS
Inline-level elements have their CSS display property set to either inline, inline-table, or inline-block and these elements do not force a line break above and below themselves. Inline-level boxes are generated by each inline-level element which is part of the positioning scheme and contains child boxes.
Inline boxes are boxes which have their content follow inline formatting context. Inline boxes are split into a number of inline boxes whilst those inline boxes that are never split are called atomic inline-level boxes.
Anonymous inline boxes are those boxes over which developer has no control. If a block box contains some bare text and other inline-level boxes, then the bare text around inline-level boxes follows inline formatting context and is enclosed in anonymous inline boxes.
Syntax
selector {
display: inline | inline-block | inline-table;
}
Inline-level vs Block-level Elements
| Aspect | Inline Elements | Block Elements |
|---|---|---|
| Line breaks | No line breaks | Forces line breaks above and below |
| Width | Takes only required width | Takes full available width |
| Examples | <span>, <strong>, <em> | <div>, <h1>-<h6>, <p> |
Example 1: Inline Elements with Background
This example demonstrates how inline elements flow within text without breaking the line −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 20px auto;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.inline-element {
background-color: #ffeb3b;
padding: 4px 8px;
border: 2px solid #333;
color: #333;
}
.block-element {
background-color: #f44336;
color: white;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<p>This is a paragraph with <span class="inline-element">inline span</span> elements that flow <strong class="inline-element">within the text</strong> without breaking the line.</p>
<div class="block-element">This is a block element</div>
<div class="block-element">This is another block element</div>
</div>
</body>
</html>
A paragraph with yellow highlighted inline elements that flow naturally within the text, followed by red block elements that each take up the full width and create line breaks.
Example 2: Anonymous Inline Boxes
This example shows how anonymous inline boxes are created around bare text mixed with inline elements −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-container {
width: 70%;
margin: 20px auto;
padding: 20px;
background-color: #f0f0f0;
border: 2px dashed #333;
}
.colored-span {
background-color: #4caf50;
color: white;
padding: 3px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="demo-container">
This is bare text <span class="colored-span">inline element</span> more bare text <span class="colored-span">another inline</span> and final bare text.
</div>
</body>
</html>
A gray bordered container showing text where the bare text portions are wrapped in anonymous inline boxes, while the green highlighted spans are explicit inline elements. All content flows on the same line.
Example 3: Inline-Block Elements
This example demonstrates the difference between inline and inline-block elements −
<!DOCTYPE html>
<html>
<head>
<style>
.example-section {
margin: 20px;
padding: 15px;
background-color: #e8f5e8;
}
.inline-element {
display: inline;
background-color: #ff9800;
padding: 10px;
margin: 10px;
width: 100px;
height: 50px;
}
.inline-block-element {
display: inline-block;
background-color: #2196f3;
color: white;
padding: 10px;
margin: 10px;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="example-section">
<h3>Inline Elements:</h3>
<span class="inline-element">Inline 1</span>
<span class="inline-element">Inline 2</span>
<span class="inline-element">Inline 3</span>
</div>
<div class="example-section">
<h3>Inline-Block Elements:</h3>
<span class="inline-block-element">Block 1</span>
<span class="inline-block-element">Block 2</span>
<span class="inline-block-element">Block 3</span>
</div>
</body>
</html>
Two sections: The first shows orange inline elements that ignore width/height properties and flow naturally. The second shows blue inline-block elements that respect width/height properties while still flowing horizontally on the same line.
Conclusion
Inline-level elements create inline boxes that flow horizontally without line breaks, making them perfect for text formatting and small UI components. Understanding the difference between inline, inline-block, and block elements is crucial for effective CSS layout design.
501 Views
