X

Block Element Summary

Block elements are HTML elements used as boxes containing inline content and providing layout structure.

<div>Content</div>
<p>Paragraph</p>
<h1>Title heading</h1>
<ul>Unordered list</ul>
<li>List item</li>

Block elements have width and height, margins, and padding. They take up more space than their content. And this allows you to create blocks you stack into a web page layout.

A website is a stack of blocks. Block elements.

Block Element Traits

  • Create a new line
  • 100% the width of their container
  • Avoid one another
  • Allows width, height, and vertical margins
  • Vertical margins overlap

In contrast, inline elements are the content itself. Text, images, links. Formatting tags like bold or italics. And tags like span you might use to target some text for unique styling.

Code Sandbox