Enjoy 20% off all plans by following us on social media. Check out other promotions!
Quiz Questions

What's the difference between `inline` and `inline-block`?

Topics
CSS
Edit on GitHub

Let's also compare with display: block for completeness sake.

Propertyblockinline-blockinline
SizeFills up the width of its parent container.Depends on content.Depends on content.
PositioningStart on a new line and tolerates no HTML elements next to it (except when you add float)Flows along with other content and allows other elements beside it.Flows along with other content and allows other elements beside it.
Can specify width and heightYesYesNo. Will ignore if being set.
Can be aligned with vertical-alignNoYesYes
Margins and paddingsAll sides respected.All sides respected.Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on line-height, even though the border and padding appear visually around the content.
Float--Becomes like a block element where you can set vertical margins and paddings.
Edit on GitHub