Block-level vs. Inline Elements
Learning about the display CSS property
Last updated
Was this helpful?
Learning about the display CSS property
Last updated
Was this helpful?
Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.
The default value for all elements is inline. Most “User Agent Stylesheets” (the default styles the browser applies to all sites) reset many elements to “block”.
Elements only occupy the horizontal and vertical space occupied by its own content. The element sits "inline" with the rest of the text.
Examples include: span, b, img, a (full list)
An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.
An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text. The difference is that you are able to set a width and height which will be respected.
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like paragraphs, lists, div, or some block elements, like headings. Block level elements do not sit inline. By default (without setting a width) they take up as much horizontal space as they can. By default their height equals 0. It will fill vertically around content.
Examples: p, ul, li, h1, div (full list)
Hides the element from view. The element is still there, but not visible to the user.
Inline elements cannot contain block elements
Except for an anchor
