Block & Inline Elements

Historically, elements could be classified as either: block elements or inline elements.

Block-level elements have built-in line breaks, causing them to automatically stack vertically, while inline elements wrap within their containing elements.

Block-level elements take up the full width or its parent element with the height equal to the height of its contents.

Inline elements are only as large as their content such that they cannot have width or height set with CSS (with one exception: <img> is technically an inline element), and margin and padding can only be applied to the left or right of the element. Inline elements can also be aligned within a containing block element that has the text-align property set on it (including <img> elements).

Block & Inline Elements

Examples of block and inline elements:

Block	Inline
<div>	<span>
<article>	<input>
<header>	<strong>
<p>	<a>

References

• https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

• https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements