Block vs Inline Elements

Part of the Styling with CSS section of Coddy's HTML journey — lesson 54 of 76.

In HTML, elements are categorized as either block-level or inline elements, based on how they are displayed on the page. Understanding the difference between these two types of elements is crucial for creating well-structured and visually appealing layouts. Let's explore the characteristics and behaviors of block-level and inline elements.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available, stretching out to the left and right as far as it can. It creates a "block" of content.

Examples of block-level elements include:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary to fit its content. It allows inline elements to flow within a line of text or inside a block-level element.

Examples of inline elements include:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Challenge

Easy

You are given an HTML document with various elements. Your task is to identify which elements are block-level and which are inline, and then apply some basic CSS to highlight the differences. Follow the steps below:

Write a CSS rule that targets all block-level elements (div, p, h1). Set their background-color to lightgray and add a border of 1px solid blue.
Write a CSS rule that targets all inline elements (span, a, img). Set their background-color to lightyellow and add a border of 1px solid red.

Observe how the block-level elements take up the full width available and start on new lines, while the inline elements only take up as much space as necessary and flow within the line.

Cheat sheet

HTML elements are categorized as either block-level or inline elements based on their display behavior.

Block-level Elements

Block-level elements start on a new line and take up the full width available, stretching left and right as far as possible.

Examples: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary to fit their content. They flow within a line of text or inside block-level elements.

Examples: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

Try it yourself

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>