Home / HTML / Block & Inline

HTML Block & Inline

What are Block and Inline Elements?

Every HTML element has a default display value, depending on what type of element it is. The two most common display values are block and inline. Understanding the difference between block and inline elements is crucial for proper HTML structure and CSS styling.

Block-Level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Characteristics of Block Elements

Common Block-Level Elements

Example
<div>This is a div (block element)</div>
<p>This is a paragraph (block element)</p>
<h1>This is a heading (block element)</h1>
<ul>
    <li>List item (block element)</li>
</ul>
<section>This is a section (block element)</section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

Characteristics of Inline Elements

Common Inline Elements

Example
<p>This is a paragraph with <span>inline span</span> and <strong>bold text</strong>.</p>
<p>Here's a <a href="#">link</a> and some <em>emphasized text</em>.</p>

Comparing Block and Inline

Example - Block vs Inline
<style>
    .block {
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
    }
    .inline {
        background-color: yellow;
        padding: 5px;
    }
</style>
<div class="block">Block element 1</div>
<div class="block">Block element 2</div>
<p>Inline elements: <span class="inline">inline 1</span> <span class="inline">inline 2</span> <span class="inline">inline 3</span></p>

Common Block-Level Elements

Element Description
<div> Generic block container
<p> Paragraph
<h1> - <h6> Headings
<ul>, <ol> Lists
<li> List item
<table> Table
<form> Form
<header>, <footer>, <section>, etc. HTML5 semantic elements

Common Inline Elements

Element Description
<span> Generic inline container
<a> Link
<strong>, <b> Bold text
<em>, <i> Italic text
<img> Image
<input> Input field
<code> Code text
<small>, <sup>, <sub> Text formatting

Changing Display Type with CSS

You can change an element's display type using CSS:

Making Block Elements Inline

Example
<style>
    .inline-block {
        display: inline-block;
        background-color: lightblue;
        padding: 10px;
        margin: 5px;
    }
</style>
<div class="inline-block">Div 1</div>
<div class="inline-block">Div 2</div>
<div class="inline-block">Div 3</div>

Making Inline Elements Block

Example
<style>
    .block-span {
        display: block;
        background-color: yellow;
        padding: 10px;
        margin: 5px 0;
    }
</style>
<span class="block-span">Span 1 (block)</span>
<span class="block-span">Span 2 (block)</span>
<span class="block-span">Span 3 (block)</span>

Inline-Block Elements

Inline-block elements are a hybrid: they flow like inline elements but can have width, height, and margins like block elements:

Example
<style>
    .inline-block {
        display: inline-block;
        width: 200px;
        height: 100px;
        background-color: lightblue;
        padding: 10px;
        margin: 5px;
        border: 2px solid black;
    }
</style>
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>

Nesting Rules

Understanding what can contain what:

Best Practices

← HTML Lists Div Element →