Web · Box Model and Spacing
Display types: Block vs Inline
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Display Types
In CSS, every HTML element has a default display type that determines how it behaves in the page layout. The two most basic display values are block and inline.
<!DOCTYPE html>
<html>
<head>
<style>
/* Added borders to see the elements more clearly */
p, span {
border: 2px solid blue;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<p>This is a block element (p). It takes up the full width available.</p>
<p>This is another block element.</p>
<span>This is an inline element (span).</span>
<span>This is another inline element.</span>
</body>
</html>
Notice how block elements take up the full width and start on a new line, while inline elements only take up as much space as they need and flow along the same line.
Exercise 2 — Block-Level Elements
Block-level elements have several key characteristics:
- Start on a new line
- Take up the full width available by default
- Respect width, height, margin, and padding on all sides
- Create a "block" in the flow of the document
Common block-level elements include:
-
<div>
-
<p>
(paragraphs)
-
<h1>
to
<h6>
(headings)
-
<ul>
and
<ol>
(lists)
-
<li>
(list items)
-
<header>
,
<footer>
,
<section>
,
<article>
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling to visualize the blocks */
div {
background-color: lightblue;
border: 2px solid blue;
margin: 10px;
padding: 10px;
width: 50%;
height: 50px;
}
h2 {
background-color: lightgreen;
border: 2px solid green;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h2>I am a block element (h2)</h2>
<div>I am a block element (div)</div>
<div>I am another block element</div>
</body>
</html>
Width Behavior
Even though block elements take up the full width by default, you can still set a specific width for them. Notice in the example above how the divs are set to 50% width but still start on new lines.
Exercise 3 — Inline Elements
Inline elements behave differently from block elements:
- Do NOT start on a new line
- Only take up as much width as necessary
- Ignore width and height properties
- Vertical margins are not applied (top/bottom)
- Vertical padding might be applied visually but doesn't affect layout
Common inline elements include:
-
<span>
-
<a>
(links)
-
<strong>
,
<em>
(text formatting)
-
<img>
(images)
-
<button>
-
<input>
,
<label>
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling to visualize inline elements */
span {
background-color: lightpink;
border: 2px solid red;
margin: 6px; /* Horizontal margins work, vertical don't */
padding: 2px;
width: 200px; /* This will be ignored */
height: 100px; /* This will be ignored */
}
a {
background-color: lightyellow;
border: 2px solid orange;
padding: 2px;
margin: 6px;
}
</style>
</head>
<body>
<p>
This is a paragraph with
<span>an inline span element</span>
and <a href="#">an inline link</a>
inside it. <span>Another span</span> element.
</p>
</body>
</html>
Width and Height Limitations
Notice that even though we set width and height on the span elements, they are ignored because inline elements cannot have their dimensions set directly. They size based on their content.
Exercise 4 — Block or Inline?
Which of the following is NOT a characteristic of block-level elements?
Options
• They only take up as much width as needed for their content
• They start on a new line
• They can have width and height properties applied
• They respect top and bottom margins
Hint : Think about how block and inline elements differ in terms of space they occupy and how they flow in the document.
Exercise 5 — Changing Display Types
You can change how an element behaves by using the
display
property in CSS. This allows you to make block elements behave like inline elements, and vice versa.
The main display values we'll focus on are:
-
display: block
- Makes an element behave like a block element
-
display: inline
- Makes an element behave like an inline element
-
display: inline-block
- A hybrid that flows like inline but respects width/height like block
<!DOCTYPE html>
<html>
<head>
<style>
/* Converting display types */
.inline-to-block {
display: block;
background-color: lightblue;
border: 2px solid blue;
margin: 10px;
padding: 10px;
width: 50%;
}
.block-to-inline {
display: inline;
background-color: lightpink;
border: 2px solid red;
margin: 10px;
padding: 10px;
width: 200px; /* Will be ignored */
height: 50px; /* Will be ignored */
}
</style>
</head>
<body>
<h3>Spans (normally inline) displayed as blocks:</h3>
<span class="inline-to-block">I'm a span behaving like a block</span>
<span class="inline-to-block">I'm another span behaving like a block</span>
<h3>Divs (normally block) displayed as inline:</h3>
<div class="block-to-inline">I'm a div behaving like inline</div>
<div class="block-to-inline">I'm another div behaving like inline</div>
</body>
</html>
Notice how:
- The spans now start on new lines and respect width/height when changed to block
- The divs now flow inline and ignore width/height when changed to inline
Exercise 6 — Complete the CSS Display Rules
Complete the CSS rules to make the navigation links display side by side (inline) and the list items display as blocks.
/* Make the list items display as blocks */
.nav-item {
display: ____;
margin: 10px;
padding: 10px;
background-color: lightblue;
}
/* Make the links display inline */
.nav-link {
display: ____;
padding: 5px;
margin: 0 10px;
}
Options: block inline inline-block flex grid none
Hint : Consider which display value would make elements appear side by side without line breaks, and which would make elements take up the full width and create new lines.
Exercise 7 — The inline-block Value
The
display: inline-block
value is a hybrid that combines features of both inline and block elements:
- Flows like an inline element (no line break)
- Respects width, height, margins, and padding like a block element
<!DOCTYPE html>
<html>
<head>
<style>
.inline-element {
display: inline;
background-color: lightpink;
border: 2px solid red;
margin: 10px;
padding: 10px;
width: 100px; /* Ignored for inline */
height: 100px; /* Ignored for inline */
}
.inline-block-element {
display: inline-block;
background-color: lightgreen;
border: 2px solid green;
margin: 10px;
padding: 10px;
width: 100px; /* Respected for inline-block */
height: 100px; /* Respected for inline-block */
}
</style>
</head>
<body>
<h3>Comparing inline vs inline-block:</h3>
<div>
<span class="inline-element">Inline</span>
<span class="inline-element">Another inline</span>
</div>
<div>
<span class="inline-block-element">Inline-block</span>
<span class="inline-block-element">Another inline-block</span>
</div>
</body>
</html>
inline-block
is commonly used for navigation menus, buttons placed side by side, or any situation where you want elements to flow in a line but also need to set exact dimensions.
Exercise 8 — Match Elements with Their Default Display Type
Match each HTML element with its default display type:
Items to match
• <div>
• <span>
• <h1>
• <a>
Definitions
• block
• inline
• block
• inline
Exercise 9 — Understanding inline-block
What is the main advantage of using
display: inline-block
over
display: inline
?
Options
• It allows you to set width and height properties
• It creates a line break after each element
• It ignores margin and padding properties
• It prevents other elements from appearing on the same line
Hint : Think about what makes inline-block different from regular inline elements - particularly regarding dimensions and the box model.
Exercise 10 — Display Types and Their Behaviors
Match each display value with its correct behavior:
Items to match
• display: block
• display: inline
• display: inline-block
• display: none
Definitions
• Takes full width and creates a line break
• Flows within text and ignores width/height
• Flows like text but respects width/height
• Removes the element from the page layout