Box Model: Web Design Series: CSS Part 12

box model

The CSS Box Model
Get the source code for this lesson at the end of the post!

After finishing up with the border property, we are now going to begin discussing margin and padding. But before we do; you need to understand what the CSS box model is. When a web designer looks at any HTML element, he or she looks at it like a box. This is because every HTML element essentially has an invisible box around it that consists of margins, padding, and borders. It only becomes visible when the web designer tells the browser to make it visible by adding property/value declarations. I made a simple box model diagram below. Take a look at it, and then we break it down.

CSS box model picture

Think of the CSS box model as boxes inside of boxes. We’ll start with the element content. This is the actual content you created that has the invisible box around it. p, h1, h2, ol, and ul, are some examples of element content. Next, we have the padding box. Padding is the space between the element content and the border. So if you have a paragraph element; the padding is the space between the text and the border. Without padding the text would bump right up against the border and in most cases doesn’t look attractive. An example of a padding declaration for a p element might be: “padding: 15px;“. This would give us a padding of 15 pixels on all four sides of our paragraph between the text and the border.

The border box is up next. We have worked with borders a lot in the last few posts, so this one should be pretty simple to understand. In your border declaration or declarations, you specify a width, style, and color. The final piece of the CSS box model is the margin box. A margin is the space between the border and any surrounding elements. And if one side has no element next to it; then the margin is the space between the border and the edge of the browser window. Most browsers have default margins. So if you actually want your element border to touch the end of the browser window; you would need to specify that in a CSS body rule by using “margin: 0;“. You do not have to put a value of 0px here; 0 is acceptable by itself. It has been incredibly popular recently to have full-width image sliders and so in web design. We are going to start making the box model visible in the following examples.

box model border code

box model border display

We have an h2 element in our HTML code, and in the CSS stylesheet, an h2 rule with a shorthand border declaration that creates a 2 pixel, solid red border around all four sides of our h2 heading. The border displays across the entire available length of the browser window because we have not specified a width declaration in our CSS. We need to take notice of a few things here. First the space between the border and the edge of the browser window. This is the default margin that the browser adds. We’re going to get rid of that in a moment. Then, you can see the left side of our heading is bumped right up against the border. As you probably have guessed; it’s because we haven’t given our h2 rule a padding declaration yet. Below, I have taken away the default margin and padding for every single element on the page. This is a very common thing for web designers to do.

take away defaults code

take away defaults display

When you run this code in your browser you will be able to see the change more clearly. Our border now spans the entire length of the browser window. We made a CSS rule for the asterisk ( * ). The asterisk affects every single element on your web page. Web designers use different methods when it comes to removing the default margins and paddings that the browser adds. Some designers don’t like to use the * to remove the defaults because they feel it can slow down page load times when you’re telling the browser to affect every single HTML element. This is up for debate on how much it would actually slow down. I find this is the easiest way to remove the browser defaults and have never had any big impact on my web pages from using it. Some other CSS rules that can be created to do the same thing are “html{ }“, “body{ }“, or remove the defaults from a few elements like “html, body, p{ }“. You might get different results; especially in multiple browsers from each of these methods. I use the * rule, but ultimately it will come down to what you prefer to use. You can get a few web designers opinions on this topic. In the next example, we add a padding and a margin declaration to our h2 rule.

final margin code

final margin display

Because we removed the default margin and padding; now whenever we create a margin or padding declaration we overriding for that specific element. I gave our h2 heading a padding of 20 pixels. You can see the effect of the padding from the space between the text and the border. There is also a padding of 20 pixels on the right side of our text but it isn’t clear because the border spans the width of the browser. We also have a margin of 80 pixels in our h2 rule. I set a very large margin here to make it very clear where the margin space is. This gives us a margin of 80 pixels on all four sides of the border. There is also a margin at the bottom but can’t be seen until we add more elements underneath.

We are going to finish on that note. Consider this an intro to the margin and padding properties in CSS. The main focus today was to teach you what the CSS box model is. In the next post, we’ll do some more work with margin and padding. Thanks for reading, I’ll see you next time.

Source Code

<!DOCTYPE html>
<html>
<head>
<title>The CSS Box Model</title>
<style>
*{
margin: 0;
padding: 0;
}
h2{
border: 2px solid red;
padding: 20px;
margin: 80px;
}
</style>
</head>
<body>
<h2>Welcome to Clear Coded Programming</h2>
</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: