HTML Block and Inline Elements Explained with Examples

What you will learn

Every element on a web page takes up space in one of two main ways. Some elements stack one below the other, like paragraphs in a book. Others flow side by side inside a line, like words in a sentence. These two behaviours are called block and inline.

Once you understand this, many “strange” things stop being strange: why a <span> ignores its width, why two <div> elements never sit side by side, why a <p> cannot hold a <div>. In this lesson you will learn the rules of block and inline elements, the third type in between (inline-block), how to change the behaviour with CSS, and how to check any element yourself.

The big idea

Picture a page of a book:

• Each paragraph starts on a new line and uses the whole width of the page. These are block elements.
• Each word sits inside a line, one after another, and only takes the space it needs. These are inline elements.

A web page is a mix of both: block elements build the big structure (sections, paragraphs, lists) and inline elements decorate the text inside them (links, bold words, small labels).

Good to know: “block” and “inline” are really default display behaviours decided by the browser (and controlled by the CSS display property). They are not something you write in HTML. Each element simply comes with a default.

Block elements

A block-level element:

1. Always starts on a new line.
2. Takes the full width available, even if its content is short.
3. Pushes the next element below it.
4. Respects width, height, margin and padding on all four sides.
5. Can contain other block elements and inline elements.

Run this example. The borders show you the real size of each box:

<p style="border: 2px solid tomato;">Hello World, I am a paragraph.</p>
<div style="border: 2px solid steelblue;">Hello World, I am a div.</div>
<h3 style="border: 2px solid seagreen;">Hello World, I am a heading.</h3>

Notice three things:

• Each element sits on its own line.
• Each border stretches across the whole width, although the text is short.
• The browser adds some space above and below paragraphs and headings (their default margin).

Common block elements

Group	Elements
Text	<p>, <h1> to <h6>, <blockquote>, <pre>, <address>
Grouping	<div>, <hr>, <figure>
Lists	<ul>, <ol>, <li>, <dl>
Structure	<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Forms and data	<form>, <fieldset>, <table>

Two of these are special. <li> is technically display: list-item and <table> is display: table, but for everyday work they behave like block elements: each one starts on a new line.

A block element always takes the full width, even when you set a width

This surprises many beginners. Look at what happens when you give a block a smaller width:

<div style="width: 200px; border: 2px solid tomato;">I am 200px wide.</div>
<div style="border: 2px solid steelblue;">I am still on my own line.</div>

The first <div> is now narrow, but the second one still starts on a new line. A block element does not share its line, even when there is empty space next to it. The width only changes how much of the line it fills, never whether it owns the line.

You can centre a block that has a fixed width with automatic side margins:

<div style="width: 200px; margin: 0 auto; border: 2px solid tomato;">
  I am centred.
</div>

Inline elements

An inline element:

1. Does not start on a new line. It stays inside the current line of text.
2. Takes only as much width as its content needs.
3. Ignores width and height.
4. Can only have horizontal margin that pushes its neighbours. Vertical margin has no effect on the layout.
5. Should contain only text and other inline elements.

<p>
  Learning <span style="border: 2px solid tomato;">HTML</span> is fun. Water is
  H<sub>2</sub>O and 5<sup>2</sup> = 25. Read more on
  <a href="#">this page</a> or press <code>Ctrl + S</code>.
</p>

The <span>, <sub>, <sup>, <a> and <code> all live inside the same paragraph and the same line. Each one is exactly as wide as its own text.

Common inline elements

Group	Elements
Generic	<span>
Links	<a>
Text meaning	<strong>, <em>, <mark>, <small>, <code>, <kbd>, <abbr>, <q>
Text style	<b>, <i>, <u>, <sub>, <sup>
Line and media	<br>, <img>
Forms	<label>, <input>, <button>, <select>, <textarea>

Some of these need a footnote. <img>, <input>, <button>, <select> and <textarea> are inline in the sense that they sit in a line with text, but they behave like a mix of both worlds: unlike a <span>, they do accept width and height. You will meet this in-between type in a moment.

Whitespace between inline elements

Because inline elements sit in a line, the browser treats the gap between them like an ordinary space, and (as you learned in the text lesson) it collapses any amount of spaces and line breaks into one space:

<span style="border: 2px solid tomato;">One</span>
<span style="border: 2px solid steelblue;">Two</span>
<span style="border: 2px solid seagreen;">Three</span>

Although you typed them on three lines, all three spans appear on one line, separated by a single space.

Block vs inline side by side

	Block	Inline
Starts on a new line	Yes	No
Width	Full width available	Only as wide as its content
width and height	Respected	Ignored
Vertical margin	Works	Has no effect
Horizontal margin	Works	Works
Can contain	Block and inline elements	Text and inline elements
Typical examples	<div>, <p>, <h1>, <ul>	<span>, <a>, <strong>, <em>

Try this and watch what the browser ignores:

<div style="width: 200px; height: 60px; border: 2px solid tomato;">
  Block: width and height work.
</div>

<span style="width: 200px; height: 60px; border: 2px solid steelblue;">
  Inline: width and height are ignored.
</span>

Margin and padding on inline elements

Padding and margin behave differently on the two types. On inline elements:

• Horizontal padding and margin (left, right) work as you expect.
• Vertical margin (top, bottom) is ignored.
• Vertical padding is drawn, but it does not push the lines above and below away. It just overlaps them.

.demo {
  border: 2px solid tomato;
  margin: 30px;
  padding: 20px;
}

In the editor, look at the two <span> elements. The 30px left and right margin creates a gap between them, but the top and bottom margin does nothing. The padding grows the box up and down, but the surrounding lines do not move.

If you need vertical spacing around something small, you will not use an inline element. You will switch it to another display type, which is the next topic.

Changing the behaviour with CSS display

The block or inline behaviour is only the default. The CSS display property can change it for any element. The main values are:

Value	Behaviour
block	Starts on a new line, takes full width
inline	Stays in the line, ignores width and height
inline-block	Stays in the line and accepts width, height and vertical margin
none	The element is removed from the page (nothing is displayed)

Turn an inline element into a block

Links are inline. Making them blocks is how menus are built: each link gets its own row, and the whole row becomes clickable.

a.demo {
  display: block;
  border: 2px solid tomato;
  padding: 8px;
  margin: 8px;
}

Turn a block element into an inline one

A <div> normally takes a full row. With display: inline it flows in the line like a word:

div.demo {
  display: inline;
  border: 2px solid tomato;
  padding: 8px;
}

inline-block: the best of both

inline-block sits in the line like inline, but its box accepts width, height and all margins like block. It is perfect for buttons, badges and small cards placed in a row.

a.demo {
  display: inline-block;
  width: 150px;
  text-align: center;
  border: 2px solid tomato;
  padding: 8px;
  margin: 8px;
}

Here the link stays on the same line as the spans before it, but it obeys width: 150px.

display: none

Setting display: none makes the element disappear completely, and it leaves no empty space behind. You will use this often with JavaScript to show and hide things.

Which elements can go inside which?

Nesting has a simple rule of thumb:

Block elements can contain block and inline elements. Inline elements should contain only text and other inline elements.

<!-- Correct: inline elements inside a block -->
<div>
  <p>I am a <strong>paragraph</strong> with a <a href="#">link</a>.</p>
</div>

<!-- Wrong: a block element inside an inline element -->
<span>
  <div>A box inside a span</div>
</span>

There are two exceptions you should know:

• A <p> is a block element but is more strict. It may contain only text and inline elements. If you put a <div>, heading or list inside a <p>, the browser closes the paragraph early and your page ends up different from what you typed. Use a <div> (or a <section>) as the outer container instead.
• The <a> element is flexible. In modern HTML a link may wrap larger pieces of content, such as a whole card made of a heading and a paragraph, as long as it does not contain another link or button.

<a href="#" style="display: block; border: 2px solid tomato; padding: 8px;">
  <h3>Clickable card</h3>
  <p>The whole box is one link.</p>
</a>

How to check any element yourself

Do not memorise lists. You can test any element in seconds.

Method 1: give it a border. Add style="border: 2px solid tomato;". If the border stretches across the page, it is a block. If it hugs the text, it is inline.

Method 2: use browser DevTools.

1. Right-click the element on your page and choose Inspect.
2. Open the Computed tab in the side panel.
3. Find the display property. It will say block, inline, inline-block, list-item, and so on.

Method 3: outline everything at once. This CSS draws a line around every element, which shows the whole structure of your page:

* {
  outline: 1px solid tomato;
}

Tip: Remove the outline rule when you are done. It is a debugging tool, not part of your design.

Real-life example: a profile card

Here is a small card that uses both types together. The block elements build the structure, and the inline elements decorate the text inside.

<div style="border: 2px solid tomato; padding: 12px; max-width: 320px;">
  <h3>Aman Sharma</h3>
  <p>
    Web developer from <strong>Delhi</strong>. Skills:
    <span style="background: #ffe0b2;">HTML</span>
    <span style="background: #ffe0b2;">CSS</span>
    <span style="background: #ffe0b2;">JavaScript</span>
  </p>
  <p>Contact: <a href="#">aman@example.com</a></p>
</div>

Read it from the outside in: the <div> is a block container. The <h3> and the two <p> elements are blocks stacked inside it. The <strong>, the three <span> labels and the <a> are inline, so they flow within their paragraph.

A note on the words “block-level” and “inline-level”

You will see two different sets of words in books and tutorials:

• In CSS, the words are block and inline. They describe how a box is laid out, and they can be changed with display.
• In the HTML specification, elements are grouped by what they may contain: flow content (almost everything) and phrasing content (text and the elements that mark up text). Phrasing content is close to what beginners call “inline”.

For now, the beginner rule of thumb is enough: block = structure, inline = text inside the structure. The details will make sense when you write more pages.

Common mistakes

• Trying to size an inline element. Setting width or height on a <span> or <a> does nothing. Use display: inline-block or display: block first.
• Expecting two <div> elements to sit side by side. Block elements always take their own line. To place them in a row, you need CSS layout (Flexbox, which comes later).
• Putting a block element inside a <p> (<div>, <h2>, <ul>). The browser closes the paragraph early.
• Putting a block element inside a <span>. It is not valid and may look broken. Use a <div> when the container holds blocks.
• Using <br> to push blocks apart. Blocks already start on new lines. Use CSS margin for space.
• Believing that a tag is block or inline “by nature”. It is only the default. CSS display can change it.
• Adding vertical margin to a <span> or <a> and wondering why nothing moves. Inline elements ignore it. Change their display type.

Interview-style questions

What is the difference between block and inline elements? A block element starts on a new line and takes the full width available. An inline element stays in the line and takes only the width of its content.

Can you set width and height on an inline element? No, they are ignored. Use display: inline-block or display: block to make them work.

What is inline-block? A display value that keeps the element in the flow of the line like an inline element, but lets it accept width, height and vertical margins like a block element.

Is <img> a block or an inline element? By default it is inline-level (it sits in a line of text), but it accepts width and height because it is a replaced element.

Can a <div> be placed inside a <span>? No. A block-level container should not go inside an inline one. Use a <div> as the outer container instead.

Practice

1. Use the Practice in Editor button. Change .demo so the border is steelblue, then decide from the picture which elements are block and which are inline.

2. Add width: 200px to .demo. Which elements change? Which ones ignore it? Now add display: inline-block to the <span> and <a> elements and see the difference.

3. Build a small menu with three <a> links. First keep them inline, then make each link display: block with some padding. Which version is easier to click on a phone?

4. Fix this code (it has two mistakes, a block inside an inline element and a block inside a paragraph):

   <span>
     <div>Welcome</div>
   </span>
   <p>Hello <h2>World</h2></p>

5. Open any website, right-click a heading, a link and an image, and use Inspect to write down their computed display values.

Recap

• Block elements (<div>, <p>, <h1>, <ul>) start on a new line, fill the full width, and respect width, height and all margins.
• Inline elements (<span>, <a>, <strong>, <em>) stay inside a line, are only as wide as their content, and ignore width, height and vertical margin.
• Inline-block keeps the element in the line but lets it use width and height.
• Block and inline are defaults. CSS display can change them, and display: none removes an element from the page.
• Blocks may contain blocks and inline elements. Inline elements should contain only text and other inline elements, and a <p> may only contain text and inline elements.
• To check any element, give it a border or look at the display value in the browser’s DevTools.