DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS inline, block, inline-block
Suprabha
Suprabha

Posted on

CSS inline, block, inline-block

Let's understand the difference between Inline, Block, Inline-Block.

1️⃣ inline

2️⃣ block

3️⃣ inline-block

<p>
    Lets checkout how inline, block and inline-block works. You can or can't
    set the <span>width</span> or <span>height</span> for few display
    properties.
</p>
Enter fullscreen mode Exit fullscreen mode

1️⃣ inline

Inline elements takes there own width and height, you can not apply the width and height, and if you try to apply then it won't have any effect.

These are the inline HTML elements πŸ‘‡

  • span
  • a
  • img
  • u
  • small
  • strong
  • b
  • ... many more
.inline {
    padding: 5px;
    border: 5px dashed #ff527b;
    width: 200px; /* ❌ It will not work */
}
Enter fullscreen mode Exit fullscreen mode

css display inline

2️⃣ block

A block-level element always starts on a new line. A block-level element always takes up the full width available.

A block level element has a top and a bottom margin, whereas an inline element does not.

These are the block HTML elements πŸ‘‡

  • h1
  • p
  • div
  • header
  • main
  • table
  • section
.block {
    display: block;
    padding: 5px;
    border: 5px dashed #ff527b;
}
Enter fullscreen mode Exit fullscreen mode

css display block

3️⃣ inline-block

inline-block It’s formatted just like the inline element, where it doesn’t start on a new line.

It’s essentially the same thing as inline, except that you can set height and width values.

.inline-block {
    display: inline-block;
    padding: 5px;
    border: 5px dashed #ff527b;
    width: 200px;  /* βœ… It will work  */
}
Enter fullscreen mode Exit fullscreen mode

css display inline-block

Reference 🧐

Buy Me A Coffee

🌟 Twitter πŸ‘©πŸ»β€πŸ’» suprabha.me 🌟 Instagram

Top comments (8)

Collapse
 
fcalderan profile image
Fabrizio Calderan • Edited on

Actually images don't behave exactly like inline elements since they are replaced elements (like videos, for example): they do accept a width / height / inline-size / block-size (but a padding won't affect it).

Collapse
 
naveenchandar profile image
Naveenchandar • Edited on

Yeah correct but even padding/margin will work on those elements MDN.

Collapse
 
suprabhasupi profile image
Suprabha Author

Inline element don't except external width and height.
developer.mozilla.org/en-US/docs/W...

Collapse
 
fcalderan profile image
Fabrizio Calderan • Edited on

As it is currently written in the snippet below the list of the inline elements, it seems that setting a width to an img element won't work but it will.

Thread Thread
 
suprabhasupi profile image
Suprabha Author • Edited on

Check this out:
You will find answer and many more tag

developer.mozilla.org/en-US/docs/W...

Collapse
 
afif profile image
Temani Afif

why you the border won't work for inline element? it will

Collapse
 
abhilearnstocode profile image
Abhii

Agreed πŸ’―

Collapse
 
suprabhasupi profile image
Suprabha Author

Thanks for notifying, its was by mistake.
Fixed it πŸ™πŸΌ

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.