Inline-block is a powerful display value that combines the features of inline and block elements.
It lets elements stay in one line like inline elements, but also allows you to set width, height, margin, and padding like block elements.
These boxes stay in one line, but still behave like block elements.
You can control their size and spacing easily, which is not possible with normal inline elements.
This is how simple navigation menus are built using inline-block.
Each menu item stays in the same row and still has proper spacing and size.
Developers often use inline-block to create card layouts before learning Flexbox or Grid.
It is simple, powerful, and works in all browsers.
Inline-block is also useful in forms and labels where you want items to align neatly without complex layout rules.
Practice task
Create three boxes using inline-block:
- Width: 180px
- Height: 70px
- Margin: 10px
- Border: 2px solid blue
Try changing them to display inline and notice what breaks.
Next lesson
In the next page, you will learn how to hide elements using display none and visibility.