What is CSS Display?
The display property within CSS (Cascading Style Sheets) defines the presentation of an HTML element on a webpage. It dictates the type of container utilized for an HTML element and impacts the styling and positioning of the element within the page layout.
The CSS display property holds significant importance in CSS. It dictates the presentation of an element and enables control over its arrangement on the webpage.
Every element inherently possesses a predetermined display value based on its characteristics. Each element within a webpage is essentially a rectangular container, with its behavior determined by the CSS property settings.
Syntax:
display: value;
Common values include the following:
- Block: The element fills the entire width of its container and is rendered at the block level, beginning on a new line.
- Inline: The element is rendered as an inline element, occupying only the necessary width and not beginning on a new line.
- Inline-block: This element is displayed as a container for an inline-level block. It functions similarly to an inline element but has block-level capabilities.
- None: The element is hidden on the page and is not displayed.
- Flex: The element turns into a flex item, and its offspring become flex containers. This is frequently used to make responsive and adaptable layouts.
What is CSS Display Inline?
An element has the ability to imitate the characteristics of an inline element in CSS through the utilization of the display: inline; declaration. When an element is configured with display: inline;, it occupies only the essential width without initiating a new line.
An HTML element can mimic the behavior of an inline element by applying the display: inline; property in CSS to specify its display characteristics.
Syntax:
The format for applying inline display in CSS is demonstrated below:
selector {
display: inline;
}
Why We Use CSS Display Inline?
There are several essential rationales for utilizing the display inline property in CSS. Some of these include:
- Text integration
When you want to emphasize or format specific words or phrases within a block of text without disrupting the overall flow, utilizing display: inline; on the <span> enables you to ensure that the emphasized term "bold" seamlessly blends into the paragraph.
- Generating inline hyperlinks and buttons
Developers often leverage CSS to generate inline buttons or hyperlinks. This technique enables the integration of clickable components directly within a text or content string.
- Preventing Line Breaks
When you desire elements to be positioned adjacently on a single line without starting a new line, employing display: inline; can prevent line breaks. By default, block-level elements initiate on a new line; nevertheless, this functionality can be altered by applying display: inline;.
- Adjusting content width
By employing the CSS display property with a value of inline, it is possible to constrain an element's width to fit its content precisely. Conversely, block-level elements typically span the full width of their containing element as a default behavior.
- Alignment across a single line
CSS can achieve the horizontal alignment of elements within a text line or inline context by utilizing the display property set to inline. This method ensures that the elements remain on the same line and are positioned next to each other horizontally.
- Constructing navigation menus
You have the option to establish a horizontal alignment for navigation elements within a structure by employing the CSS property display: inline;. This method will showcase them in a side-by-side arrangement along a single line, which is a common layout choice for navigation bars.
Styling and arranging elements within the text and content flow of a web page is facilitated by understanding the appropriate usage of display: inline. This versatile feature enables designers to craft layouts that are seamless and aesthetically pleasing.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul class="nav-bar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Welcome to Our Website!</h2>
<p>This is an example of using <span class="highlight">display: inline;</span> in CSS to create inline links and style inline elements.</p>
<p>We offer a variety of services, including <span class="tag">Web Design</span>, <span class="tag">Development</span>, and <span class="tag">SEO Optimization</span>.</p>
<p>Explore more about our <a href="#" class="inline-link">services</a> and feel free to <a href="#" class="inline-link">contact us</a> for more information.</p>
</section>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
nav {
margin-top: 10px;
}
.nav-bar {
list-style: none;
padding: 0;
}
.nav-bar li {
display: inline;
margin-right: 20px;
}
.nav-bar a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.highlight {
display: inline;
color: #f00;
}
.tag {
display: inline;
background-color: #3498db;
color: #fff;
padding: 3px 8px;
margin-right: 5px;
}
.inline-link {
display: inline;
color: #3498db;
text-decoration: underline;
font-weight: bold;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
Output: