~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/12html-block-inline

# Block vs Inline Elements

HTML elements display in two main ways: block-level and inline. Understanding this helps you control layout and apply CSS correctly.

## Block-Level Elements

Block elements start on a new line and take up the full width available:

```html
<div>I'm a block element</div>
<div>I start on a new line</div>

<p>Paragraphs are block elements</p>

<h1>Headings are block elements</h1>

<section>Sections are block elements</section>
```

**Block elements:**
- Start on a new line
- Take up 100% width
- Can contain other block or inline elements
- Respect width/height properties

## Inline Elements

Inline elements flow within text without breaking the line:

```html
<p>
  This is a paragraph with
  <strong>bold text</strong>,
  <em>italic text</em>, and
  <a href="#">a link</a>
  all on the same line.
</p>
```

**Inline elements:**
- Don't start on a new line
- Only take up necessary width
- Can't contain block elements
- Width/height properties don't apply

## Common Block Elements

```html
<div>Division (generic container)</div>
<p>Paragraph</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<ul>Unordered list</ul>
<ol>Ordered list</ol>
<li>List item</li>
<form>Form</form>
<table>Table</table>
<header>Header</header>
<footer>Footer</footer>
<main>Main content</main>
<section>Section</section>
<article>Article</article>
<aside>Aside</aside>
<nav>Navigation</nav>
```

## Common Inline Elements

```html
<span>Span (generic inline)</span>
<a href="#">Link</a>
<strong>Bold/strong emphasis</strong>
<em>Italic emphasis</em>
<img src="photo.jpg" alt="Image" />
<br />
<code>Code</code>
<small>Small text</small>
<mark>Highlighted text</mark>
<sub>Subscript</sub>
<sup>Superscript</sup>
<time>Time</time>
<abbr>Abbreviation</abbr>
```

## Visual Comparison

```html

<div style="background: lightblue;">Block 1</div>
<div style="background: lightgreen;">Block 2</div>
<div style="background: lightcoral;">Block 3</div>

<p style="background: lightblue;">
  Inline
  <span style="background: lightgreen;">elements</span>
  <span style="background: lightcoral;">flow</span>
  horizontally
</p>
```

**Block result:**
```
Block 1 (full width)
Block 2 (full width)
Block 3 (full width)
```

**Inline result:**
```
Inline elements flow horizontally
```

## Inline-Block Elements

A hybrid that flows inline but accepts width/height:

```html
<div style="display: inline-block; width: 100px; background: lightblue;">
  Inline-block 1
</div>
<div style="display: inline-block; width: 100px; background: lightgreen;">
  Inline-block 2
</div>
```

**Inline-block elements:**
- Flow inline (don't break line)
- Accept width/height
- Respect margin/padding
- Common for buttons, form elements

## CSS Display Property

Override default display behavior:

```css
/* Make a block element inline */
div {
  display: inline;
}

/* Make an inline element block */
span {
  display: block;
}

/* Inline-block hybrid */
button {
  display: inline-block;
}

/* Hide element */
.hidden {
  display: none;
}

/* Flexbox (modern layout) */
.flex-container {
  display: flex;
}

/* Grid (modern layout) */
.grid-container {
  display: grid;
}
```

## Complete Example

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .block {
        background: lightblue;
        margin: 10px 0;
        padding: 10px;
      }

.inline {
        background: lightgreen;
        padding: 5px 10px;
      }

.inline-block {
        display: inline-block;
        width: 150px;
        background: lightcoral;
        padding: 10px;
        margin: 5px;
        text-align: center;
      }

.flex {
        display: flex;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    
    <h1>Block Elements</h1>
    <div class="block">Div 1</div>
    <div class="block">Div 2</div>
    <p class="block">Paragraph</p>

<h1>Inline Elements</h1>
    <p>
      Text with
      <span class="inline">inline span 1</span>
      and
      <span class="inline">inline span 2</span>
    </p>

<h1>Inline-Block Elements</h1>
    <div class="inline-block">Box 1</div>
    <div class="inline-block">Box 2</div>
    <div class="inline-block">Box 3</div>

<h1>Flexbox Layout</h1>
    <div class="flex">
      <div class="block">Flex 1</div>
      <div class="block">Flex 2</div>
      <div class="block">Flex 3</div>
    </div>
  </body>
</html>
```

## When to Use Each

**Use block elements for:**
- Page structure (header, main, footer)
- Sections and articles
- Forms and tables
- Paragraphs and headings

**Use inline elements for:**
- Text formatting (bold, italic, links)
- Small elements within text
- Labels and tags

**Use inline-block for:**
- Buttons
- Form controls
- Navigation items
- Small cards that need width/height

## Common Mistakes

1. **Expecting width/height on inline elements** — Use inline-block or block
2. **Putting block elements inside inline** — Invalid nesting
3. **Using display: none to hide content** — Bad for accessibility
4. **Overriding default display** — Understand before changing
5. **Ignoring semantic meaning** — Don't use div for everything

No changes yet

cancel