CSS TutorialLesson 28Free preview

CSS Inline-block

This lesson is part of CSS · All levels

Summary

Display: inline-block combines the properties of inline elements that follow a text stream and blocks that can be adjusted width, height, padding, and vertical margins. These elements are suitable for making boxes aligned like buttons in a single row without changing the HTML structure. Note that small spaces between inline-block elements can appear from a white space in HTML.

Key points

Inline blocks follow a text stream and can be given width, height, padding, and full margin.
Elements adjacent to inline blocks line up parallel throughout the load in one row.
The white space between the inline-block elements can create small gaps; it can be removed by commenting or using a flexbox.
For a more reliable and gap-free layout, flexboxes are often the top choice.
The inline-block remains respectful of the text-align from its parent.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.