Quiz 1105: CSS display

What's the difference between display: inline, display: block, and display: inline-block in CSS?

Quick Answer

These CSS display properties control how elements are rendered and positioned on a web page.

• inline elements: Flow within a line, do not break lines, and cannot have their width or height directly set.
• block elements: Occupy their own line, can be styled with width and height, and act as block-level elements (like <p>, <h1>, etc.).
• inline-block elements: Combine the behaviors of both inline and block. They flow like inline elements, but you can set their width, height, and control their margins and padding.