Demystifying CSS Display Properties: Controlling Element Layout
In CSS, the display property is used to define how an element should be rendered and laid out on a web page. It determines the type of box an element generates and how it interacts with other elements.
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types
There are several common display property values:
- block: The element generates a block-level box. It starts on a new line and takes up the full width available.
- inline: The element generates an inline-level box. It does not start on a new line and only occupies the space necessary for its content.
- inline-block: The element generates a combination of inline and block-level behavior. It flows as an inline-level element but allows width, height, padding, and margin settings.
- none: The element is not displayed on the page. It is completely removed from the document flow and occupies no space.
- flex: The element becomes a flexible container. It enables flexible layouts using flexbox, allowing easy alignment and distribution of child elements.
- grid: The element becomes a grid container. It enables grid-based layouts using CSS grid, providing powerful grid-based alignment and positioning capabilities.
Here is an example demonstrating the usage of the display property:
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutor Joes</title>
<style>
h1,p
{
background:red;
}
ul li
{
display: inline;
list-style-type: none;
background: orangered;
margin-left: 10px;
padding:15px;
}
b{
background:blue;
display: inline-block;
height: 25px;
width:350px;
}
</style>
</head>
<body>
<h1>Display Properties In CSS</h1>
<ul>
<li>C Program</li>
<li>C++</li>
<li>Java</li>
<li>.Net</li>
<li>MySql</li>
</ul>
<p>Lorem ipsum dolor, <b>sit amet consectetur</b> adipisicing elit. Voluptatem consectetur nulla
officiis, saepe rerum earum aperiam deserunt ipsum, nostrum exercitationem nihil nesciunt, nemo
modi iste numquam doloremque vitae quibusdam at.</p>
<p>Lorem ipsum dolor, <b>sit amet consectetur</b> adipisicing elit. Voluptatem consectetur nulla
officiis, saepe rerum earum aperiam deserunt ipsum, nostrum exercitationem nihil nesciunt, nemo
modi iste numquam doloremque vitae quibusdam at.</p>
</body>
</html>
Live Preview
- The selector h1, p targets both the <h1> and <p> elements and applies the background property to set their background color to red.
- The selector ul li targets the <li> elements that are descendants of <ul> (unordered list). It sets the display property to inline, which makes the list items flow horizontally. The list-style-type property is set to none, removing the bullet points associated with list items. The background property sets the background color of the list items to orangered. The margin-left property adds a left margin of 10 pixels, creating space between list items. The padding property sets the padding inside each list item to 15 pixels, providing spacing between the content and the list item's borders.
- The selector b targets the <b> (bold) elements and applies the following styles: background: blue; sets the background color to blue. display: inline-block; allows the element to flow inline but also respects width and height properties. height: 25px; sets the height of the element to 25 pixels. width: 350px; sets the width of the element to 350 pixels.
By manipulating the display property, you can control how elements are rendered and positioned, enabling you to create different layouts and achieve the desired visual appearance on your web page.
To download raw file
Click Here