LESSON 7.1

The Display Property

Understand how every HTML element takes up space on the page

Learn the difference between block and inline elements, how to change any element's display behavior with CSS, and when to use inline-block.

💡 The Concept

The CSS display property controls how an element participates in page layout, and it is one of the most important properties in CSS. Every HTML element has a default display value. Most are either block or inline, and understanding the difference explains why some elements stack vertically while others sit side by side.

Block Elements

Block elements take up the full width of their container and always start on a new line. They stack vertically like building blocks. Common examples:

  • <p>
  • <h1> through <h6>
  • <div>
  • <hr>

Inline Elements

Inline elements only take up as much width as their content needs. They flow alongside other elements on the same line rather than forcing a new line. Common examples:

  • <img>
  • <a>
  • <span>

You can easily see the difference between display: block and display: inline in the screenshot below:

A block element fills the full width available. In the example, the block element places a red border across the image. An inline element is only as wide as it needs to be.
Block elements stack vertically; inline elements sit side by side.

Changing the Display Value

You can override any element’s default display behavior with CSS. For example, <h1> is a block element by default. Set it to display: inline and it only takes as much space as its text:

h1 {
   display: inline;
}

display: inline-block

inline-block gives you the best of both worlds. The element flows inline with other content, but you can still set width, height, and padding on all sides. This is especially useful for navigation links and buttons:

nav li {
   display: inline-block;
   padding: 10px 20px;
}

🎬 Video Demonstration

This video demonstrates block and inline elements and how the display property works.

Exercise: Try It Yourself

Step 1. Open JSFiddle.

Step 2. Add an <h1> with some text and an <img> using this sloth photo:

<h1>Slow Like a Sloth</h1>
<img src="https://webdevstudents.com/wp-content/uploads/2025/09/sloth.png" width="200" height="200" alt="sloth in a tree">

Step 3. Add a border to the h1 in your CSS. Remember that a border requires three values: width, style, and color — for example, border: 2px solid black;. Run the fiddle and observe the result. The heading takes the full width of the page because it is a block element, while the image only takes as much space as it needs because it is inline.

JSFiddle showing h1 as a block element taking full width above the sloth image

Step 4. Now add display: inline to the h1 in your CSS and run it again. The heading now sits right next to the image because both are inline.

JSFiddle showing h1 and sloth image sitting side by side as inline elements

💡 Note: You may notice the heading text sits at the bottom of the image rather than the top. This happens because inline elements align to the baseline by default, and an image’s baseline is its bottom edge. You can fix it by adding vertical-align: top to the img in your CSS.

❓ Frequently Asked Questions

What is the difference between inline and inline-block?

Both allow elements to sit side by side on the same line. The difference is that inline elements ignore width, height, and top/bottom padding settings — the element is only as big as its content. inline-block respects all of those properties. If you need to give something a specific size or add vertical padding — like a nav button with equal padding on all sides — inline-block is what you want. If you just need text or an image to flow with surrounding content, inline is fine.

Why would I change an element’s default display value?

The defaults make sense for most situations, but not all. The most common reasons to override them are: making list items or nav links sit horizontally instead of stacking vertically (display: inline or inline-block), making an image fill a full row and have its own spacing (display: block), or hiding an element entirely (display: none). Understanding the defaults lets you know when and why to override them.

What does display: none do?

It removes the element from the page layout entirely — it takes up no space and is invisible to the user, though it is still in the HTML. This is different from visibility: hidden, which hides the element visually but still reserves its space in the layout. display: none is commonly used with JavaScript to show and hide menus, modals, and accordion panels. The next lesson, Making Elements Disappear with CSS, covers this technique.

Do all HTML elements have a display value?

Yes. Every element has a default display value set by the browser’s built-in stylesheet. Most content elements like p, h1–h6, div, and ul are block by default. Text-level elements like a, span, strong, and em are inline by default. img is technically inline by default, which sometimes causes unexpected spacing below images — setting it to display: block fixes that in many layouts.

★ Key Takeaways

The display property is one of the most powerful tools in CSS. This lesson showed you how block, inline, and inline-block values change the way elements sit on the page. Up next, you will learn how to hide elements using CSS. Hiding and showing elements is a technique used in menus, tabs, accordions, and much more.

Next Lesson: Making Elements Disappear with CSS

← Back to Page Layout Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons