Block, Inline, and Inline-Block: Placing Elements in the Flow

Your sections now have room inside them, but your GitHub link is still one plain word sitting inside a sentence. This lesson turns that link, and a second one you add beside it, into real buttons. Padded, coloured, and sitting side by side instead of buried in a paragraph.

The concept

Here is your page as it stands. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat">GitHub</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Every element already behaves one of two ways in your page's flow, whether you have set anything or not. Run these two labels first.

TWO LABELS, EACH ON ITS OWN FULL-WIDTH LINE · HTML

Untitled

RUN TO SEE YOUR PAGE

Photographer and Writer each take the full width of the page, landing on their own line, even though neither needs that much room. This is a block element: full width, always starting a new line, pushing whatever comes after it down to the next one.

Now run the same two labels, changed only in their tag:

THE SAME TWO LABELS, SITTING INSIDE A SENTENCE · HTML

Untitled

RUN TO SEE YOUR PAGE

Same words, same background colour. This time they sit side by side, inside one sentence, each only as wide as its own text. This is an inline element: it sits inside the surrounding content instead of claiming a line of its own.

Your GitHub link is exactly this second kind. That is fine for plain text. A button needs padding around its words, without breaking out of the sentence onto a full-width line of its own. Run this.

A LINK, STILL IN THE SENTENCE, NOW SHAPED LIKE A BUTTON · HTML

Untitled

RUN TO SEE YOUR PAGE

GitHub still sits inside the sentence, right where you typed it. It now carries visible padding and a solid background, like a real button. This third behaviour is inline-block: placed inline, like text, but sized like a block, accepting padding, width, and height.

The syntax

All three behaviours come from one property: display.

.tag {
  display: block;
}

Every element already has a default display value the browser assigns on its own. div, section, p, and h1 through h6 default to block. a, span, and strong default to inline. Setting display yourself overrides whichever default an element started with.

.tag {
  display: inline;
}

An inline element sits inside the surrounding text. It sizes itself to its own content, and it ignores width and height entirely, no matter what value you give them.

.tag {
  display: inline-block;
  padding: 0.5rem 1rem;
}

inline-block keeps the inline placement, sitting among other content instead of starting its own line. It still accepts padding, width, and height, the way a block element does. It is the shape a button-like link needs: inline enough to sit in a sentence, block enough to carry real size.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block and inline</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Find my code on <a href="#" class="tag">GitHub</a>.</p>
  </body>
</html>

styles.css

.tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: teal;
  color: white;
}

One link, one display value, one button that still sits inside its own sentence.

Common mistakes

You set width: 200px; height: 60px; on your GitHub link, expecting a bigger button, and the link stays exactly the size of its own text. Run it:

A WIDTH AND HEIGHT AN INLINE LINK IGNORES · HTML

Untitled

RUN TO SEE YOUR PAGE

An <a> is inline by default, and an inline element ignores width and height completely. The values sit right there in your CSS, valid and spelled correctly, and still do nothing. Give the element display: inline-block; first, then width and height take effect.

You set display: block on two links, hoping they will sit side by side. They stack instead, each stretching the full width of the page. Run it:

TWO BLOCK LINKS, STACKED INSTEAD OF SIDE BY SIDE · HTML

Untitled

RUN TO SEE YOUR PAGE

block claims the full width of its container and starts a new line every time. Two block elements can never sit side by side on their own. inline-block is the value that keeps elements next to each other while still accepting padding and size. Rows with more control than that come later.

Try it yourself

Your GitHub link still reads as plain text in the middle of a sentence. Turn it, and a second link, into real buttons. After each Run, scroll the preview to Contact if you do not see the links yet. The header and About sit above them, so the buttons can land below the fold.

Run the starting code below. Scroll the preview to Contact if you do not see it yet. Confirm your GitHub link looks like ordinary text, underlined but unstyled.
In your HTML, add class="btn" to the GitHub link. Then add a second link next to it in the same paragraph, such as a LinkedIn profile, also with class="btn".
In styles.css, add a .btn rule with display: inline-block; and padding: 0.5rem 1rem; (two values: the first is top and bottom, the second left and right). Run it. Scroll to Contact. Confirm both links now show visible padding, while still sitting inside the sentence.
Add background-color: teal; and color: white; to .btn. Run it. Scroll to Contact. Confirm both links now look like solid, coloured buttons.
Break it on purpose: add width: 150px; and height: 50px; to .btn, then change its display to inline. Run it. Scroll to Contact. Confirm both buttons shrink back down to fit their own text, ignoring the width and height sitting right there in your CSS.
Fix it: change display back to inline-block, then delete the width and height lines, since your padding already gives the buttons a comfortable size. Run it. Scroll to Contact. Confirm both buttons return to their padded, side-by-side look.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your GitHub and LinkedIn links now read as real buttons, sitting side by side instead of buried in a sentence. The next lesson gives your skills the same kind of row, built this time with a layout tool made for it: flexbox.