Author
Home > Technology > What is the Difference Between Block and Inline Elements?

Guilherme Mazui

•2 minutes to read

What is the Difference Between Block and Inline Elements?

🆚 Go to Comparative Table 🆚

The main difference between block and inline elements in HTML lies in their layout and positioning on the web page:

  • Block elements:
  • Always start on a new line.
  • Take up the full width available (stretch out to the left and right).
  • Have top and bottom margins.
  • Examples: <p>, <div>, and <hr>.
  • Inline elements:
  • Never start on a new line.
  • Only take up as much width as necessary (occupy the space bounded by the tags in the HTML element).
  • Do not have top and bottom margins.
  • Examples: <span>, <br>.

Block elements are typically used for creating distinct sections or groups of content on a web page, while inline elements flow within the text and are used for formatting specific parts of the text.

On this page
  • What is the Difference Between Block and Inline Elements?
  • Comparative Table: Block vs Inline Elements

    • Comparative Table: Block vs Inline Elements

    Here is a table comparing the differences between block and inline elements:

    Feature Block Elements Inline Elements
    Width Occupies full width irrespective of their sufficiency Occupies only necessary width
    Line Breaks Starts in a new line Doesn't start in a new line
    Spacing Automatic top and bottom margins No top and bottom margins
    Nesting Does not allow other elements to sit behind Allows other inline elements to sit behind
    Examples <h1>-<h6>, <p>, <div> <span>, <b>, <a>

    Block elements always start in a new line and take up the full width available, while inline elements do not start in a new line and only occupy the necessary width. Inline elements can be nested within other inline elements, whereas block elements do not allow other elements to sit behind them.

    Read more:

    Guilherme Mazui

    Guilherme Mazui is graduated in journalism from the Federal University of Minas Gerais (UFMG) and a master's degree in Communication from the University of São Paulo (USP). In addition, he has experience in advertising writing and has worked as a content editor in several companies.