CSS Inline-block
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 |
Block |
Inline |
---|---|---|
Inline-block is quite similar to |
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. |
Contact Us