DEV Community

Anojan Thevarasa
Anojan Thevarasa

Posted on

1 1

Inline-Block in CSS

Every HTML element is a piece of rectangle in CSS. When building a web page, the different elements will have to be displayed in various formats and sometimes have to be hidden too. This is where the Display property comes into play. There are 3 major Display properties Block, Inline & Inline-Block.

Block level elements by default take up the entire space of the row they are in, whatever width we provide or even if we don't provide a width at all. This way, multiple block level elements end up being placed one below other. The elements don't show up next to each other, even if there is available space.

CSS for block display

Block Output

Inline level elements align horizontally and next to each other in the same row, as long as there is space. However, it is to be noted that we can't provide a width or height to the inline elements like we can for block-level elements.

CSS for inline display

Inline Output

So what if we want to display elements next to each other and also have them adopt width and height that we provide? That is where Inline-block Display option proves to be handy.

Inline-Block

The inline-block property of Display takes the best of bothe worlds. With an inline-block display property we can have elements being placed next to each other in same row like inline elements do. And we can also provide width and height for the elements like we are able to do in a block-level element. So inline-block has been a widely used Display property, apart from the recent and most popular Flex property.

CSS for inline-block display

inline-block output

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay