CSS Inline-block
Last Updated :
09 Jan, 2024
CSS Inline-block permits the addition of the width and height on the element. This property is used to display an element as an inline element (like <span>). The height and width properties are not affected on display: inline; property. It allows only the left and right sides of margins, not the top, and bottom. This property is commonly used to render the list items horizontally instead of vertically.
Syntax
display: inline-block;
Example: The example illustrates the difference between three values including inline, block, and 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:
Default Value and Inline-block value
The default value renders the elements vertically whereas when property display with value inline-block applied all elements positioned horizontally.
Example: The example illustrates comparison between the value inline-block and without value.
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 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.
|
Share your thoughts in the comments
Please Login to comment...