Difference b/w Display:inline and inline-block

The CSS property “Display” is very useful and commonly used property of CSS which contains lots of values. In this blog we’ll talk about only “display:inline” and “display:inline-block”.

We generally use both these properties to allow other elements to sit to their left and right but it has some difference which is explained below.

Display:inline

An inline element has no line break before and after of its neighbour elements and it allows HTML next to it.
1. Allows all side of padding
2. Allows only left and right side of margins, not top and bottom
3. You can’t set width and height of its element
4. Respect other elements to sit their left and right

Display:inline-block

An inline-block element is placed as an inline element (on the same line as adjacent content). It looks like a inline element but actually its behaves as a block element and don’t force to line break
1. Allows all side of padding and margin
2. You can set width and height of its element
3. Respect other elements to sit their left and right

As you can see in above given example, an inline-block (the button) will have taken its full space in all directions for padding and margins but inline (the button) will not allow it.

Hope you will like it !
Linkedin
Twitter