Styling boundaries - the box model

Where are we?

You know how computers represent images. You know how to find free images, and show them on page. Let’s use CSS to add some styling to image boundaries.

This page’s goals

By the end of this lesson/page, you should:

• Know what the box model is.

• Be able to style image and text boundaries.

Boxes

As you know, the <p> tag puts white space around text. For example:

<p>This is a paragraph.</p>
<p>This is a not a paragraph. Oh, wait, yes it is.</p>

Without styling, this looks like:

Figure 1. Paragraphs

There is white space above, below, and to the left and right of each paragraph. Each <p> is in a box, a rectangle of space on the screen.

The text you’re reading now is in a box. You could draw a rectangle around the text, with “The” in the upper left, and “right.” in the lower right.

Browsers create boxes for <p>, <h1>, <h2>, <ul>, <ol>, and other tags. Including the <img> tag. Each one creates a box (a rectangular space) on the screen.

You control the box by using the CSS attributes border, margin, and padding.

Let’s start with the border.

The border attribute

You have lots of control over the border around an element.

Border style

Here’s a picture of me in the snow, with a solid border.

Here’s the code:

.solid_border {
  border-style: solid;
}
...
<img class="solid_border" src="kieran_snow.jpg">

I created a class in the CSS (don’t forget the .), and set the border-style. I used the class in the HTML with the class attribute of the <img> tag.

Here’s a dashed border:

Here’s the code:

.solid_border {
  border-style: dashed;
}

The default border style is hidden, meaning no border.

There are more styles, like dotted and grooved. You can see the list at SitePoint.

There are four borders around the image: top, right, bottom, and left. border-style sets all four to be the same. You can give each one a different style. For example:

Here’s the code:

.mixed_border {
  border-top-style: solid;
  border-right-style: hidden;
  border-bottom-style: groove;
  border-left-style: dotted;
}

It looks terrible, but it shows you the options.

You can put the values on one line, like this:

.mixed_border {
  border-style: solid hidden groove dotted;
}

How does the browser know which style to put on each side? It goes in the order top, right, bottom, left. That’s in clockwise order from the top:

Figure 2. Border order

This ordering applies throughout CSS. For padding, margins, and other things we’ll see later.

Border width

You can set the width of borders like this:

.thick_border {
  border-style: solid;
  border-width: 10px;
}

The width won’t show unless you set a style as well.

Border color

Set a border color using the usual color codes, the same ones used for fonts and everything else. For example:

.color_border {
  border-style: solid;
  border-width: 10px;
  border-color: #668014;  
}

Combining into one border style

Usually when I set colors, I specify color, style, and width, and want them the same for all sides. I put all the options in a single border style:

.color_border {
  border: solid 10px #668014;  
}

Margins and padding

We’re talking about boxes around elements. We’ve talked about borders. Another attribute, margin, let’s you control the spacing around an element.

Suppose I had this HTML:

<p>
  <img src="kieran_snow.jpg">
  <img src="kieran_snow.jpg">
  <img src="kieran_snow.jpg"><br>
  <img src="kieran_snow.jpg">
  <img src="kieran_snow.jpg">
  <img src="kieran_snow.jpg"><br>
  <img src="kieran_snow.jpg">
  <img src="kieran_snow.jpg">
  <img src="kieran_snow.jpg">
</p>

Figure 3. Dog matrix code

It renders like this:

Figure 4. Dog matrix

I’ll change one of the lines to this:

<img class="big_margin" src="kieran_snow.jpg">

Now I’ll add a class:

.big_margin {
  margin: 20px;
  border: dotted 2px #668014;
}

Here’s what I end up with:

Figure 5. Dog matrix with margin

Notice how there’s space between the border and the other elements around the image. That’s what the margin property does.

The padding property also adds a gap, but it’s a little different. Here’s a style:

.big_padding {
  padding: 20px;
  border: dotted 2px #668014;
}

Figure 6. Dog matrix with padding

The padding attribute adds a gap between the edge of the content and the border. That’s different from margin, which adds the space outside the border.

You can use them both together.

.big_margin_padding {
  margin: 20px;
  padding: 20px;
  border: dotted 2px #668014;
}

It looks like:

Figure 7. Dog matrix with margin and padding

The box model

Put border, margin, and padding together, and you have the box model.

Figure 8. The box model

The box model shows how border, margin, and padding combine. And the box model isn’t just for images.

Text, too

You can use the same properties with text. For example, let’s say you want to make a message stand out, like this:

Figure 9. Text standing out

Here’s a page that does this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>The Dog Zone</title>
    <style type="text/css">
      body {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 14px;
      }
      .stand_out {
        border: dotted 2px red;
        background-color: #FFB6C1;
        font-weight: bold;
        font-style:italic;
        margin: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>The Dog Zone</h1>
    <p>Welcome to the best place for dog fun on the Web.</p>
    <p class="stand_out">Today only! 50% off road kill!</p>
    <p>Get your stuff here!</p>
  </body>
</html>

You can try the page.

Here’s a buttony thing made with the box model.

Figure 10. Box model example

Thick gray borders on the bottom and right create a shadow. The thinner lines on the top and left add to the button effect. The color for the top and left is a slightly darker version of the background color.

Summary

Browsers use the box model to create rectangular areas on the screen. You can change the way the boxes look with border, margin, and padding.

What now?

You can make text wrap around an image. Let’s see how.