> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/day-3-more-html-and-css/block-and-inline-elements.md).

# 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](https://i.imgur.com/9iGQzKM.png)

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>