The Box Model
CSS allows you to make everything on your web page whatever size that you would like. However, it’s important to understand a few key terms: height, width, background, padding, margin, and border. The above diagram summarizes the point of this lesson, which is to teach you how to use the box model.
- Height and Width
Everything on your web page has a height and width, even if you haven’t written in the “height” and the “width”. You can specify a height and width for <img>, <h1>, <p>, etc. Basically, anything that has text or a picture in it can have a height and a width. Let’s take the <div> that you gave the “normal” class to. If you give it a width, in pixels (px):
.normal {
width: 50px;
}
Then the text will only be 50 pixels wide, and it will keep on wrapping to the next line. Go ahead and give your “normal” class a width in “style.css”. If you would like to add a height, try that, too. But watch out with heights – they may have interesting results!
- Border
Every box has a border. Most of the time, it is invisible (or “transparent”). However, you can also specify a border for any box, like so:
.normal {
width: 50px;
border: 2px solid black;
}
Which creates a border around this text that is 2 pixels wide, is a solid line, and is a black line. Go ahead and give your “normal” class a border in “style.css”.
- Padding
Padding is the space between the content (image or text) and the border of the box. The easiest way to see padding is to play around with small and big padding, so start with the smallest padding there is:
.normal {
width: 50px;
border: 2px solid black;
padding: 0px;
}
Which is no padding at all! Take a look in your web browser at your page. Does it look squished together? Now, adjust the padding so that it’s very large:
.normal {
width: 50px;
border: 2px solid black;
padding: 50px;
}
And you will see how spaced-out the text or image looks! Choose a padding that works for this content in “style.css”.
- Backgrounds
From previous lessons, you already know how to change the background color of a box. As a reminder, in CSS you need to set the “background-color” property (and you can go to for a color reference). The background color only changes the color behind the text or image and the padding area:
.normal {
width: 50px;
border: 2px solid black;
padding: 50px;
background-color: #9933CC;
}
If you want to change the background to an image instead of a color, do the following:
.normal {
width: 50px;
border: 2px solid black;
padding: 50px;
background-image: url(“test.jpg”);
}
Change the background to a color or an image in “style.css”.
- Margins
The final part of the box model is the margins. The margins are the spaces outside of the border and the padding, and provide spacing for the box next to other boxes. Like we did with padding, let’s start with the smallest margin possible:
.normal {
width: 50px;
border: 2px solid black;
padding: 50px;
background-image: url(“test.jpg”);
margin: 0px;
}
And then try a large margin:
.normal {
width: 50px;
border: 2px solid black;
padding: 50px;
background-image: url(“test.jpg”);
margin: 50px;
}
With this large margin, you want to be able to see it in action. Make sure that the background of your page is different than the background of this box. Do you see the margin?
With your other class, “important”, change the width, border, padding, background and margin to something different than for “normal”.
Once you’re finished, send an e-mail to me letting me know!