The 3 Musketeers: inline, block & inline-block

A reference for box-model behavior three types of display components in CSS

let me tell a story about 3 fellas named inline, block and inline-block in the world of CSS.

I hope everybody is aware of the box model concept. Everything in HTML world is a box. That is why cats love HTML 😂.

There are 3 components of a box:

॰ Dimension (Height and Width)

॰ Padding

॰ Border

॰ Margin

https://www.washington.edu/

But those 3 fellas don’t behave in the same way when it comes to width, height, padding, border, and margin. Let's talk to them one by one:

Dimension (width, height):

inline: See, I am very frugal when it comes to space. I will take as much width as much my child will need, no more no less. About height, I choose to follow my own rule. You can tell me about your choice but I am not going to give a damn 😎!

block: Well, I like to have my place a Lil comfy. I will take the whole width if you don’t tell me, otherwise I will follow whatever width and height you tell me 😊.

inline-block: I choose to follow Mr. block.

Look each box has dimension 600 X 100, but how different elements are behaving

Padding

inline: well there is a little caveat, I will follow the padding provided by you. “But however, the vertical padding—the top and bottom—may bleed into the lines above and below an element”. You know I am frugal na?

block: I will follow whatever you say, master.

inline-block: I choose to follow Mr. block 😏.

Every box has 30px vertical padding and 10px horizontal padding. Look at the bleeding in the inline element.

Margin

inline: Okay okay you are asking…let’s do a favor for you. I will follow whatever horizontal margin you provide, but vertical margin, Nah! You give but I won’t take it! 😎

block: I will follow whatever you say, master.

inline-block: Mr. block I am following you but you don’t have any self-esteem 🙄.

Look although I applied both horizontal and vertical margin, incase inline element vertical margin not applied.

Borders

inline: Ahh…now it is becoming irritation, okay I will follow you 😑

block: I will follow whatever you say, master.

inline-block: I am following Mr. block 😥.

Ah…that was a productive interview. In a nutshell