The display: inline-block property allows you to apply both width and height to an element, similar to how block elements work. Unlike the display: inline property, which only respects left and right margins/paddings, display: inline-block respects the element's full margins and paddings (including top and bottom).
This property is commonly used to arrange elements, such as list items, horizontally rather than vertically.
Syntax
display: inline-block;
Example of CSS inline-block property
Here are a few examples demonstrating how the inline-block property works compared to inline and block:
1. Comparing inline, block, and inline-block
This example demonstrates the behavior of elements using display: inline, display: block, and display: inline-block.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS inline-block</title>
<style>
.divelement>div {
display: inline-block;
color: green;
font-size: 20px;
margin: 10px;
font-weight: 700;
}
.example3 > span {
display: block;
margin: 10px;
color: rgb(183, 22, 22);
font-weight: 700;
}
.example2>div {
display: inline;
font-weight: 700;
color: blueviolet;
}
</style>
</head>
<body>
<div class="divelement">
<div>MERN</div>
<div>MEAN</div>
<div>DSA</div>
<div>MEVN</div>
</div>
<p>
The above elements have the
property display with value
inline-block
</p>
<div class="example2">
<div>MERN</div>
<div>MEAN</div>
<div>DSA</div>
<div>MEVN</div>
</div>
<p>
The above block elements "div" have the
property display with value
inline.
</p>
<div class="example3"
style="margin-top: 20px;">
<span>MERN</span>
<span>MEAN</span>
<span>DSA</span>
<span>MEVN</span>
</div>
<p>
The above inline elements "span" have the
property display with value
block.
</p>
</body>
</html>
Output:
2. Comparison Between inline-block and Block
The following example compares elements with display: inline-block and their default block behavior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS inline-block</title>
<style>
.divelement > div {
display: inline-block;
color: green;
height: 50px;
width: 70px;
font-size: 20px;
margin: 10px;
font-weight: 700;
}
p {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="divelement">
<div class="div">MERN</div>
<div class="div">MEAN</div>
<div class="div">DSA</div>
<div class="div">MEVN</div>
</div>
<p>
The above element have the
property display with value
inline-block
</p>
<div>
<div class="div">MERN</div>
<div class="div">MEAN</div>
<div class="div">DSA</div>
<div class="div">MEVN</div>
</div>
</body>
</html>
Output:
Difference between Inline-block, Block and Inline
Inline-block | Block | Inline |
|---|
Inline-block is quite similar to inline, but we can have the flexibility to give width, height, and vertical margins. | The block takes the full width. | Inline ignores width and height. |
Inline-block respects both horizontal and vertical whitespace. | The block respects both horizontal and vertical whitespace | Inline ignores vertical whitespace. |
Inline-block is used when the elements need to flow inline but retain block-level styling. | The height and the width can be defined. | Inline only takes only the necessary width. It does not start on a next line. |