Understanding the difference between the display and position properties can be confusing for many developers. In this article, we'll clarify with examples when to use each. We have used simple examples to help you understand how display and positioning work. After understanding the entire article, you will have complete knowledge, which is necessary to remember these two properties.
Let's get started and master the CSS display and position properties.
CSS Display
The display property is used to control how to display an element on any webpage. It determines whether elements should sit next to each other or start on a new line. With this, we can also decide whether any element should be kept as a block, inline, or inline-block or not.
HTML consists of various elements, with some being block-level, like <h1>, <div>, and <p>, while others are inline, such as <span>, <b>, and <strong>. Additionally, there are elements like <img> that are inline-block.
The display property has different values.
- Inline
- Block
- Inline-block
- None
Syntax
display: value;Inline value
The "inline" value of the CSS display property ensures that elements take up only as much space as their content requires. This means that if the content is large, it will occupy more width, and if it's smaller, it will take up less width. Additionally, inline elements are positioned on the same line as other inline elements.
By default, the <span> and <strong> tags have this property. It's commonly used to keep block elements inline, allowing them to appear on the same line. When the display is set to inline, any user-defined height and width values are ignored.
In the example below, even though all elements are block-level by default, using the "inline" value of the display property ensures they are all positioned on the same line.
<head>
<style>
h1 {
margin-bottom: 80px;
}
div {
background: thistle;
display: inline;
width: 100%;
}
h3 {
height: 200px;
width: 200px;
background: steelblue;
display: inline;
height: 200px;
}
p {
height: 200px;
width: 500px;
display: inline;
background-color: thistle;
}
h2 {
background-color: thistle;
}
</style>
</head>
<body>
<h1>The Display property Inline value</h1>
<div>This is block element</div>
<h3>This is block element</h3>
<p>This is block element</p>
<h2>This is block element</h2>
</body>Important: When the display property is set to "inline," any specified height and width for each element are ignored.
Block value
A block element takes up the full width and does not allow other elements on the same line. By default, its width is 100%, but you can change it using other values. Also, you can turn any inline element into a block, making elements appear vertically one after the other.
The block property lets you adjust the height and width of block elements, and if no width is defined, a div under the block property will inherit the width of its container.
<head>
<style>
.main {
background-color: steelblue;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.one {
display: block;
background-color: thistle;
height: 100px;
border: 1px solid black;
width: 100px;
}
.two {
display: block;
height: 100px;
width: 100px;
background-color: steelblue;
border: 1px solid black;
}
.span-1 {
display: block;
color: red;
}
</style>
</head>
<body>
<h1>The display property Block value</h1>
<div class="main">
<div>This is block element</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur <span class="span-1">This is span (inline element)</span> adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur <span class="span-2">This is span (inline element)</span> adipisicing elit. </p>
<span class="one">This is inline element</span>
<span class="two">This is inline element</span>
<span>1.This is inline element </span>
<span>2.This is inline element</span>
</body>
Inline-block value
The inline-block element is useful when you want an element to be inline but also set its width and height. As such, the <img> element combines both inline and block values to specify whether the element should be displayed inline, as well as its height and width.
<head>
<style>
h1 {
margin-bottom: 70px;
}
div {
display: inline-block;
background-color: thistle;
height: 100px;
width: 150px;
}
</style>
</head>
<body>
<h1>The display property Inline-block value</h1>
<div>This is block</div>
<div>This is block</div>
<div>This is block</div>
</body>
None value
The CSS "display" property, when set to "none," hides an element. This is handy when you need to hide content on certain devices or in specific situations on your website.
<head>
<style>
div {
font-size: 25px;
}
.f-box {
background-color: thistle;
height: 100px;
width: 250px;
}
.s-box {
background-color: steelblue;
height: 100px;
width: 250px;
}
.t-box {
background-color: thistle;
height: 100px;
width: 250px;
display: none;
}
.l-box {
background-color: steelblue;
height: 100px;
width: 250px;
}
</style>
</head>
<body>
<h1>The display property None value</h1>
<div class="f-box">1. This is block element </div>
<div class="s-box">2. This is block element </div>
<div class="t-box">3. This is block element</div>
<div class="l-box">4. This is block element</div>
</body>
Contents value
The CSS "display" property with the value "contents" removes the parent element, treating the child as its own parent. This is useful for removing parent styling from child elements.
<head>
<style>
.container {
display: contents;
border: 1px solid black;
height: 200px;
width: 400px;
background: thistle;
}
span {
border: 1px solid steelblue;
}
</style>
</head>
<body>
<h1>The display Property Contents value</h1>
<div class="container">
<p>This element child of the div element <span>Oh Really</span></p>
<p>This element child of the div element <span>Oh Really</span></p>
<p>This element child of the div element <span>Oh Really</span></p>
</div>
</body>
With display contents
Without display contents
List-item value
The CSS display property with the value "list-item" is used to indicate that an element should be rendered as a list item, typically with a bullet point. This property allows you to create list items without using the <li> element explicitly.
<head>
<style>
.container p {
display: list-item;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>The display Property List-item value</h1>
<div class="container">
<p>Home</p>
<p>About</p>
<p>Skills</p>
<p>Contact</p>
</div>
</body>
Flex value
The "flex" value of the CSS display property aligns block elements horizontally within their parent container, arranging child elements in a single row. This enables flexible and responsive layouts.
<head>
<style>
div {
height: 100px;
display: flex;
}
.container {
background-color: steelblue;
display: flex;
}
.F-box {
background-color: orange;
width: 10%;
border: 1px solid black;
}
.S-box {
background-color: thistle;
width: 10%;
border: 1px solid black;
}
.T-box {
background-color: yellowgreen;
width: 10%;
border: 1px solid black;
}
.L-box {
background-color: white;
border: 1px solid black;
width: 10%;
display: flex;
}
.box-5 {
border: 1px solid black;
background-color: green;
width: 10%;
display: flex;
color: white;
}
</style>
</head>
<body>
<h1>The display Property Flex value</h1>
<div class="container">
<div class="F-box">1</div>
<div class="S-box">2</div>
<div class="T-box">3</div>
</div>
<div class="L-box">4</div>
<div class="box-5">5</div>
</body>
Inline-flex value
The "inline-flex" value of the CSS display property aligns children of multiple parent elements in a single line, adjusting their width based on content.
It's commonly used on e-commerce websites for inline positioning while preserving individual content widths.
<head>
<style>
.container1 {
display: inline-flex;
height: 100px;
width: 180px;
}
.box1 {
background-color: thistle;
padding: 10px;
}
.box2 {
background-color: slategray;
padding: 10px;
}
.box3 {
background-color: steelblue;
padding: 10px;
}
.container2 {
display: inline-flex;
height: 100px;
width: 180px;
}
.box-1 {
background-color: thistle;
padding: 10px;
}
.box-2 {
background-color: slategray;
padding: 10px;
}
.box-3 {
background-color: steelblue;
padding: 10px;
}
.container3 {
display: inline-flex;
height: 100px;
}
.box--1 {
background-color: thistle;
padding: 10px;
}
.box--2 {
background-color: slategray;
padding: 10px;
}
.box--3 {
background-color: steelblue;
padding: 10px;
}
</style>
</head>
<body>
<h1>The display Property Inline-flex value</h1>
<div class="container1">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<div class="container2">
<div class="box-1">box1</div>
<div class="box-2">box2</div>
<div class="box-3">box3</div>
</div>
<div class="container3">
<div class="box--1">box1</div>
<div class="box--2">box2</div>
<div class="box--3">box3</div>
</div>
</body>
Explore Various CSS Display Property Values
Inline-table: This value sets the element as an inline-level table.
Run-in: Depending on the context, the "run-in" value displays an element as either a block or inline.
Table: When set to "table," the element behaves like a table, allowing the creation of table-like structures without using table-related elements such as <tr> and <td>.
Table-caption: Specifies that the element should be rendered as a normal block box.
Table-column: Behaves similarly to the <col> element.
Table-column-group: Converts a logical element into a <col> group.
Table-header-group: Behaves similarly to the <thead> element.
Table-footer-group: Behaves similarly to the <tfoot> element.
Table-row-group: Behaves similarly to the <tbody> element.
Table-cell: Behaves similarly to the <td> element.
Table-row: Behaves similarly to the <tr> element.
Inherit: Sets the value according to its parent element.
Initial: Sets this property to its default value.
Block and inline element lists
Block Elements: <address>, <article>, <aside>, <canvas>, <div>, <dt>, <figure>, <footer>, <form>, <h1> to <h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <ul>, <video>
Inline Elements: <a>, <abbr>, <b>, <button>, <code>, <dfn>, <em>, <i>, <img>, <input>, <label>, <map>, <object>, <output>, <q>, <select>, <span>, <strong>, <sub>, <textarea>, <time>, <var>
CSS Position
The CSS position property is employed to modify the default positioning of elements.
In HTML, every element is initially assigned a default position. By utilizing various values for the position property, you can override this default positioning.
Through the use of different position values, you have the flexibility to adjust the positioning of any element to suit the layout of your web page.
The position property has five different values.
- Absolute
- Fixed
- Relative
- Static
- Sticky
Syntax
position: value;
When adjusting an element's position using properties like top, right, bottom, and left, it's essential to understand that these values determine the distance of the HTML element from the viewport's edge. (The viewport refers to the visible area of the browser window where web content is displayed. If the content exceeds the viewport's dimensions, a scrollbar enables users to scroll and access the remaining content).
Now let us understand each position value in detail with examples for clear understanding so that you can understand the concept behind each value of the position property.
Absolute value
Absolute positioning sets an element's position based on its nearest parent's defined position. This means the element's placement isn't affected by its siblings or other elements on the same level.
Let's compare two examples: in one, we'll keep the parent element's position relative, while in the other, it remains as the default (static). This comparison will help clarify the concept of absolute positioning.
<head>
<style>
.parent {
position: relative;
margin-top: 50px;
}
.child-one {
position: absolute;
font-size: 25px;
background-color: gray;
height: 100px;
top: 0px;
}
.child-two {
font-size: 25px;
background-color: steelblue;
height: 200px;
}
.child-three {
background-color: thistle;
font-size: 25px;
height: 100px;
position: absolute;
top: 0px;
left: 600px;
}
</style>
</head>
<body>
<h1>The position property Absolute value</h1>
<div class="parent">
<div class="child-one">This element define Absolute value, but its parent element has been set from a position relative.</div>
<div class="child-two">The Static value</div>
</div>
<div class="child-three">This element is assigned an absolute value but its parent is the body tag and we
haven't set any position, so the position property of the body tag has the default value.</div>
</body>
Fixed value
The fixed value positions an element in a fixed location on the viewport, meaning it remains in the same place even when the page is scrolled. This property is often utilized for elements like chat apps or advertisements that need to remain visible regardless of scrolling.
In the provided example, the two boxes on the right side will stay in their positions even when the page is scrolled, demonstrating the behavior of elements with fixed positioning.
<head>
<style>
.box {
display: flex;
height: 800px;
}
.box-1 {
position: fixed;
bottom: 300px;
right: 2px;
font-size: 20px;
background-color: thistle;
height: 100px;
width: 200px;
border: 1px solid black;
}
.box-2 {
background-color: steelblue;
height: 100px;
width: 100px;
border: 1px solid black;
}
.box-3 {
background-color: thistle;
height: 100px;
width: 100px;
border: 1px solid black;
}
.box-4 {
position: fixed;
right: 2px;
font-size: 20px;
background-color: thistle;
height: 100px;
width: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The position property Fixed value</h1>
<div class="box">
<div class="box-1">This box has been given a fixed value. It will not move, even after scrolling.</div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4">This box has been given a fixed value. It will not move, even after scrolling. </div>
</div>
</body>
Static value and relative value
Static: This is the default position where elements flow in the normal document order.
Relative: Relative value works almost the same as static positioning, but it allows you to change the top, right, bottom, and left of this element, which static positioning does not.
Let's look at both as examples to help you understand the difference between a static value and a relative value.
<head>
<style>
.one {
position: relative;
left: 100px;
top: 10px;
font-size: 25px;
background-color: thistle;
border: 1px solid black;
height: 100px;
}
.two {
position: static;
left: 100px;
top: 10px;
font-size: 25px;
background-color: steelblue;
height: 100px;
}
.three {
left: 100px;
background-color: thistle;
font-size: 25px;
height: 100px;
top: 10px;
}
</style>
</head>
<body>
<h1>The position property Relative and Static value</h1>
<div class="one"> The Relative value</div>
<div class="two">The Static value</div>
<div class="three">The Static value default</div>
</body>
Sticky value
The "sticky" value in CSS positioning allows an element to scroll with the page until it reaches a specified point, then it sticks in place.
This is commonly used for elements like navigation bars that you want to remain visible as users scroll through content.
In the example provided, the first and last boxes will stick to the top once they reach it because their position is set to "sticky".
<head>
<style>
.box {
display: flex;
height: 800px;
}
.box-1 {
position: sticky;
bottom: 300px;
top: 2px;
font-size: 20px;
background-color: thistle;
height: 100px;
width: 150px;
border: 1px solid black;
}
.box-2 {
background-color: steelblue;
height: 100px;
width: 150px;
border: 1px solid black;
}
.box-3 {
background-color: thistle;
height: 100px;
width: 150px;
border: 1px solid black;
}
.box-4 {
position: sticky;
top: 2px;
font-size: 20px;
background-color: steelblue;
height: 100px;
width: 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The position property Sticky value</h1>
<div class="box">
<div class="box-1">This box will stick as soon as it reaches the top.</div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4">This box will stick as soon as it reaches the top.</div>
</div>
</body>
Conclusion
Whenever you create a website, it is important to understand the CSS display and position properties to control the layout and position of elements. By understanding all the examples given above properly, you would have completely understood the concept of CSS display and position properties. Now put this knowledge into practice and move forward in your web development journey.
I hope you completely understand this topic. If you have any questions, you can ask them in the question box given below.