Block-level vs. Inline Elements
Learning about the display CSS property
Every HTML Element is a Rectangular Box
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”.
display: inline
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.
display: inline-block
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.
display: block
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)
display: none
Hides the element from view. The element is still there, but not visible to the user.
CodePen Samples
Rules
Inline elements cannot contain block elements
Except for an anchor
Last updated