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.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 8 min · Modify 8 min · Mix it up 5 min · Make 9 min
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.
display: block puts each on its own line.On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
Open a news page. Find three block boxes and three inline ones, and say how you know which is which.
Listen for students who sort by size instead of by whether the box starts a new line. Ask what happens to a word in the middle of a sentence when it is bold.
Believing a div adds a look. Ask what the div would have to be told before anything on the page looked different.
| What you will see | A question to ask | The fix |
|---|---|---|
| The highlight runs across the whole page. | Is the element a span or a div? | 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. | Is there a rule that names the div or its class? | 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. | Is the display line inside the rule for the span's class? | Put display: block; between the braces of the class rule, with a semicolon. |
One possible solution for each task. Other correct programs are fine.
<style>
label {
color: navy;
display: block;
}
</style>
<form>
<label for="name">Name</label>
<input id="name">
<label for="year">Year</label>
<input id="year">
</form>
<p>Bring a hat.</p>
<p>Bring water.</p>
<style>
label {
color: navy;
display: block;
}
.packing {
background-color: lightyellow;
}
</style>
<form>
<label for="name">Name</label>
<input id="name">
<label for="year">Year</label>
<input id="year">
</form>
<div class="packing">
<p>Bring a hat.</p>
<p>Bring water.</p>
</div>
<style>
.highlight {
background-color: lightyellow;
}
</style>
<h1>Spring concert</h1>
<p>The concert is on <span class="highlight">Wednesday at 6 pm</span> in the hall.</p>
<p>Tickets are free. Bring a friend!</p>
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.
Why does a gold background on a span reach only its words, and on a div the whole width?
A span is inline, so it is only as wide as its words. A div is a block, so it takes the full width of the page.
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.