teaching machines

CS 318 Lab 8 – Box Model

February 20, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

Let’s stop a moment to reflect upon what we have done so far this semester:

Where are we headed next? Layout. Most everything we’ve done so far has followed the natural document flow, which fills all our elements in from left-to-right, top-to-bottom. We need to break out of this.

Our first step in doing so is to discuss HTML’s box model. In this model, the spatial footprint of every element is determined by a few properties:

Let’s go through a gauntlet of elements that have had these properties tweaked and reverse engineer them.

There’s something about the box model that you should be aware of. When you specify width and height, you are specifying the width and height of the content, not including the padding, border, and margin. This is often not so natural. When calculating layouts, we tend to be more concerned about the dimensions of the framed box—not just the content. We can make CSS behave like this by setting the box-sizing property for all elements:

* {
  box-sizing: border-box;

The default is content-box.

Our lab exercises for today will give you a chance to explore the box model.

Here’s your TODO list for next time:

See you then!




Your first task is to create a page of several country “stamps.” Something like this:

We won’t spell out every individual step you should take to achieve this, because that’s not how problems are solved. Instead, here’s your checklist:

Ask questions if your results aren’t matching up with the example.