The inline, inline-block, and block layout values are all possible values for the CSS display properties. Many newbie frontend developers usually struggle with understanding the difference between the three, and it’s a common frontend developer interview question.
In this article we are going to discuss the real difference between Inline vs Inline-Block vs Block.
So, let’s get started!
inline
This one displays the element inline or on the same line. In other words, inline elements do not start on a new line and only takes up as much width as its content. So, if you try to set any width and height, it will have NO effects.
.inline-element {
display: inline;
width: 9000px; /* ❌ won't have any effect */
height: 9000px; /* ❌ won't have any effect */
}Here are a few elements that have a default inline property:
spanaimg
Few other things to remember while dealing with inline elements:
- It respects –
margin-left,margin-right,padding-left,padding-right,padding-top,padding-bottom,line-height. - It does not respect –
margin-top,margin-bottom. - Allow other elements to their left and right.
Example:
See the Pen Inline Example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
inline-block
Alright, let’s move on to inline-block. It’s essentially the same thing as inline, except that you can set height and width values.
.inline-block-element {
display: inline-block;
width: 1000px; /* ✅ yes, it will work */
height: 1000px; /* ✅ yes, it will work */
}Few other things to remember while dealing with inline elements:
- It respects –
margin-left,margin-right,margin-top,margin-bottom,padding-left,padding-right,padding-top,padding-bottom,line-height. - Allow other elements to their left and right.
Example:
See the Pen inline-block Example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
block
So far, we talked about inline. Now let’s switched to the opposite of it, block. Remember inline elements appears on the same line. Well, block starts on a newline and takes up the full width available. So that means block elements will occupy the entire width of its parent element.
Here are a few elements that have a default block property:
divsection
Few other things to remember while dealing with inline elements:
- It respects –
margin-left,margin-right,margin-top,margin-bottom,padding-left,padding-right,padding-top,padding-bottom,line-height.
See the Pen block example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
