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
CSS Latest Updates - Inner & Outer Values of display Property
The CSS display property now supports a two-value syntax that allows you to explicitly control both the outer and inner display types of an element. The outer display type determines how the element participates in flow layout, while the inner display type sets how the element's children are laid out.
Syntax
display: outer-value inner-value;
Where outer-value can be block, inline, or run-in, and inner-value can be flow, flow-root, table, flex, grid, or ruby.
Display Inline with Flow-Root
The following example shows how to use inline flow-root to create an inline element that establishes a new block formatting context −
<!DOCTYPE html>
<html>
<head>
<style>
body, div, span {
box-shadow: inset 0 0 12px lightgreen;
border: 2px dotted gray;
}
span {
padding: 2%;
display: inline flow-root;
background-color: #f0f0f0;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p>This paragraph demonstrates inline flow-root behavior.</p>
<span>Inline Block 1</span>
<span>Inline Block 2</span>
<p>Notice how spans behave as inline elements but establish their own formatting context.</p>
</div>
</body>
</html>
Two gray-bordered spans with light green shadows appear inline with the text, each establishing their own block formatting context while remaining inline elements.
Display Block with Flow
Here's an example using block flow to make span elements behave as block-level elements −
<!DOCTYPE html>
<html>
<head>
<style>
body, div, span {
margin: 2%;
box-shadow: inset 0 0 12px orange;
border: 2px ridge cadetblue;
}
span {
padding: 2%;
display: block flow;
background-color: #ffe6cc;
}
</style>
</head>
<body>
<div>
<p>This is demo text above the spans.</p>
<span>First Block Span</span>
<span>Second Block Span</span>
<p>This is demo text below the spans.</p>
</div>
</body>
</html>
The span elements appear as block-level elements, each taking the full width and stacking vertically, with orange shadows and ridge borders.
Practical Example: Horizontal Navigation
This example demonstrates converting list items to inline elements to create a horizontal menu −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-color: #333;
padding: 10px;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 20px;
}
a {
color: white;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
}
a:hover {
background-color: #555;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/python">Python</a></li>
</ul>
</nav>
</body>
</html>
A horizontal navigation bar with dark background and white text links that change background color on hover.
Conclusion
The two-value display syntax provides precise control over element layout behavior by separating outer and inner display types. This feature allows developers to create more semantic and flexible layouts while maintaining clear separation between formatting contexts.
344 Views
