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.
The box model
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. But how does the browser decide how much white space?
Let me ask another question. Why is the text in Figure 1 black? You learned that it’s black because that is the browser’s default, when you don’t use a style. Why is the background white? Same reason. Why use a serif typeface? Same reason.
So, how does the browser decide how much white space to use around <p>s? Same way. The browser has defaults that it uses, unless you tell it otherwise.
Each block tag, like <p> and <hx>, is inside a box. The box has a border (usually invisible) and white space. You control the box by using the CSS attributes border, margin, and padding.
The box model defines how box around a block tag is created. Let’s look at it.
Let’s start with the most fun part, 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">
Here’s a dashed border:
Here’s the code:
.solid_border {
border-style: dashed;
}
The default style is hidden.
There are more styles, like dotted and grooved. You can see the list at SitePoint.
There are four borders around the image. You can give each border 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, left, bottom, right. 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. There’s a shortcut for that:
.color_border {
border: solid 10px #668014;
}
This is what I normally do for borders. Put all the options in a single border style. Simple is Good.
Margins and padding
We’re talking about the box model. 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
The gap between the images is because of the white space characters in the HTML: the spaces and new line between each imate.
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 6. Dog matrix with margin and padding
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 7. 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, if you like.
Summary
Browsers render elements with defaults for border, margin, and padding. For instance, the default border is hidden, meaning no border is visible. You can change them all with CSS.
What now?
Another neat thing you can do with images is use them as backgrounds, for entire pages, or for individual elements. Let’s see how.
