Block and inline boxes
Find out why paragraphs stack while bold words sit in a line, and use div and span to group things you want to style.
Every menu, card and banner on a website is a plain box that someone decided should stack or sit in a line.
Some parts of a page start on a new line, like a paragraph. Others sit inside a line of text, like a bold word or a link. Which kind an element is decides how it fills the page.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<style>
.mark {
background-color: gold;
}
</style>
<h2>Sports day</h2>
<p>Races start at <span class="mark">9 am</span> on the oval.</p>
<div class="mark">Bring a hat and water.</div>
<p>Read the <a href="https://example.com/rules">rules</a> first.</p>
<span> and <div> are tags you have not met. Both are plain boxes that the class mark colours gold. Read the code. How wide is the gold in each place?
Run
Compare the page with your prediction. Then change span to div (in the opening and closing tag): 9 am jumps onto its own line. Change it back. The last link is an inline <a>, yet it takes a whole line, because its class sets display: block;. Add display: block; to the .mark rule too: the span now stacks like a div.
| Code | What it does | Why |
|---|---|---|
<p>, <h2>, <div> |
Start on a new line and take the full width | These are block boxes. That is why the gold behind the div runs across the page |
<strong>, <a>, <span> |
Sit inside a line of text | These are inline boxes. They are only as wide as their words, and the gold stops there |
<span class="mark">9 am</span> |
A plain box inside a line | A span has no look of its own. It is for a few words you want to style |
<div class="mark">…</div> |
A plain block box | A div has no look of its own. It is for grouping several elements so you can style them as one |
display: block; |
Makes any element a block | display sets which kind of box an element is. display: inline; does the opposite |
<style>
.mark {
background-color: gold;
}
.stack {
display: block;
}
</style>
<h2>Sports day</h2>
<p>Races start at <span class="mark">9 am</span> on the oval.</p>
<div class="mark">Bring a hat and water.</div>
<p>Read the <a href="https://example.com/rules">rules</a> first.</p>
<a class="stack" href="https://example.com/join">Join the club</a>
Investigate
<div>
<p>Bring a hat.</p>
<p>Bring water.</p>
</div>
The two paragraphs are wrapped, and no rule mentions the div.
Pick the tags that sit inside a line.
Modify
Each label should sit above its box.
Need a hint?
Labels are inline, so each one sits beside its box.
Another hint
Add display: block; to the label rule.
Show the expected result
One <div> around both paragraphs, and one rule for it.
Need a hint?
Wrap both paragraphs in one div that has the class. The div needs a closing tag after the second paragraph.
Another hint
Then write a .packing rule with a background-color.
Show the expected result
Put each label on its own line, above its box.
This ticks when your page has all of the above.
Group the two paragraphs in a div with the class packing, and give it a background colour.
This ticks when your page has all of the above.
Mix it up
The words in the div and in the span should both be crimson and 20px. Right now they are navy and normal size. Change the page so both are crimson and 20px.
<style>
.alert {
color: crimson;
}
span, div {
color: navy;
}
</style>
<div>Bring a hat and water.</div>
<p>Races start at <span>9 am</span> sharp.</p>
Show the expected result
Mark the div and the span with the class alert, and make both 20px.
This ticks when your page has all of the above.
Make
Highlight the most important phrase in this concert notice. Put a <span> with the class highlight around just those words, and write a .highlight rule with a background colour.
Need a hint?
A span goes around only the words you want to mark, and it takes the class you will style.
Another hint
Then a <style> block with a .highlight rule and a background-color.
Show the expected result
Highlight a phrase with a span and a class.
This ticks when your page has all of the above.
For teachers
Students find out that block elements start a new line and take the full width while inline ones sit in the line, that div and span are plain boxes for grouping, and that display switches between block and inline. About 40 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can say which elements are block and which are inline.
- I can use a span for a few words and a div for a group of elements.
- I can switch an element between block and inline with display.
Before class
Read the unit primer "Layout and components" first, then do the Make task yourself in the playground (about 5 minutes).
A block box starts on a new line and takes the full width of its container. An inline box sits inside a line of text and is only as wide as its content. <div> (block) and <span> (inline) are plain boxes: they have no look until a rule styles them. display: block; and display: inline; swap the kind. This lesson uses background colour to show the width, because box properties such as padding and borders come next lesson.
Running the lesson
- Predict and Run: most students say the gold hugs the words in both places. The full-width band behind the div is the surprise. Turn on Boxes to show each box. Ask someone who chose the words in both places what the page would look like if the div were only as wide as its words. The idea to land: block means the full width.
- Investigate: the first question is the misconception, that a div changes the page by itself. Ask what a rule would have to say to see the div.
- Modify: labels are inline, so they run on beside their boxes. `display: block` puts each on its own line.
- Mix it up: the class and the group rule both set the colour. The class wins wherever it is written, and the size comes only from the group rule.
- Make: the check ticks on a span, a class, a rule for it and a background colour.
The hard part (on purpose)
Believing a div adds a look. Ask what the div would have to be told before anything on the page looked different.
When students get stuck
- The highlight runs across the whole page. Ask: Is the element a span or a div? Fix: Use a span for a few words in a line. A div is a block and takes the full width.
- Nothing changes when the div is added. Ask: Is there a rule that names the div or its class? Fix: A div has no look of its own. Give it a class and write a rule for the class.
- The span does not stack when display block is added. Ask: Is the display line inside the rule for the span's class? Fix: Put display: block; between the braces of the class rule, with a semicolon.
Stretch and support
Stretch: Make the three links in a nav stack on their own lines with display: block, then make three paragraphs sit in a line with display: inline. Which is easier to read?
Support: Give students the Run page and ask them only to swap span and div and say what moved.
Where it leads
Next lesson gives each box padding, a border and a margin, and works out how wide the box is. Class idea: open a news site and find three block boxes and three inline ones.
What each step is for
- Predict: Students see a box as the size of its words; a block box takes the full width of the page, an inline box only its words.
- Run: Block boxes start a new line and take the full width; inline boxes sit in the line; display switches one into the other.
- Investigate: A div and a span are plain boxes: they group things for styling and add no look; block or inline is about the line.
- Modify: display changes how an element fits in the line, and a div groups elements so one rule styles them together.
- Mix it up: A class beats a group rule even when the group rule is written below it, and the group rule still adds what the class does not set.
- Say which elements are block and which are inline.
- Use a span for a few words and a div for a group of elements.
- Switch an element between block and inline with display.