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...