HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 17: The Box Model, Margin, and Padding

This chapter is all about the box model. Below is a diagram of the box model and we're gonna discuss this in detail because this is extremely important to understand when you position your elements, add spacing, and many other things.

Box Model Diagram

·Every element on your page is set up like this. Imagine invisible boxes around every single heading, every paragraph, and even your background for the entire page. They only become visible when we specify them to be seen with code.

·First the content box. And that's what we've been using. Every time we add something to our page it is the content of the element that we are seeing.

·Second is the padding. This is the space between the content and where your background color would end. Or to describe it better. It's where the border begins. We'll see this in an example in a minute.

·Third is the border. And we've already used the border property a few times now so you should have an good idea of where the border shows up when you add that property.

·Finally we have the margin. And that is the space between all of your elements. The browser automatically adds some space by default. And in the example you'll see that you can take away the margin completely if you want.

So let's see an example of the box model. We will work with our h3 element since we haven't added any styles to it yet. Don't worry about what the heading actually says. It doesn't matter. We just want to make our boxes visible. So in your internal style sheet add this new rule:

h3 {

background-color: gray;

border: 5px solid yellow;

}

·In our new h3 rule we've adding a background color like we have many times now. And a border that we coded short hand. As you know you could have set the border by the individual property and value with border-width:, border-style:, and border-color:. So run your code here and you'll see that we now have a gray background, a yellow border, and our border is kind of close to our heading text. So let's add some padding to give some space between the text and the border. Put this into your h3 rule:

h3 {

background-color: gray;

border: 5px solid yellow;

padding: 25px;

}

·Save and run your code again. Now we have a 25 pixel margin around all four sides of our content (the text). Since we haven't specified a width, The border runs the entire width of the page. But you can see we have 25 pixels on the top, 25 pixels on the bottom, and 25 pixels on the left. The right margin is there too. It just can't be seen because we didn't specify a width.

·Another thing that you can see here is that we have a margin. And that's the space between the border and the other elements around it. There is also a margin between the border and the outside of the page. The browser adds this automatically. Notice that the margin between the h3 element and the two elements that are above and below it is double the size of the margin on the sides of our h3 element. That is because there are default margins that the browser adds to every element. So it is adding our h3 margin and the margin of the other element together. And since the edge of our page is not an element we only have the h3 margin. Hopefully that wasn't too confusing. But let's add a margin to our h3 rule to see an example of what happens when we specify the margin amount.

h3 {

background-color: gray;

border: 5px solid yellow;

padding: 25px;

margin: 30px;

}

·And finally we specified that we wanted a 30 pixel margin from the border to anything else around it on all four sides.

·One other thing that we can do with the margin here is, If you look at your page now you can see there is a margin between every element and the end of the page. We can take this away so that everything bumps right up against the edge of the browser window. You might like the default margin and want to keep it. But let's get rid of it so you can see what your page would look like with no body margin. We have to add this code to our body rule:

body {

background-color: #008080;

margin: 0px;

}

·And now all of our elements butt right up against the edge of the browser window except for the h3 element because we specified a margin. You should know that we took the margin away from the body here not the elements themselves. You could use the margin: 0; on any of your elements though. Also you may have noticed that all of our lists still have some space. And that is because there is an invisible margin around our lists. To make it visible all you have to do is add this code to both your ul and ol rules:

ul {

font-weight: bold;

border: 2px solid red;

}

ol {

font-style: italic;

border: 2px solid red;

}

Now you can see the borders with the margin space for both of your lists on your page.

Margin and Padding properties

Just like the border property you can individually control your margins and padding. Below is a list of properties that you could use on any element to control the margin and padding amounts individually:

· margin-left:

· margin-right:

· margin-top:

· margin-bottom:

· padding-left:

· padding-right:

· padding-top:

· padding-bottom:

So now that you have some experience with that you should experiment with these properties a little bit. Using these properties on your elements is one way of positioning you content on your page. But later in this book we go over positioning in more detail and these margin and padding properties will kind of be helpers for us. A little bonus exercise that you can do here is go to your body rule and add border: 5px solid black; and remove your margin: 0px; code. This will give you a visual of the margin that is added to the body by default and many web page developers actually like adding a border to their entire page. So you can decide if that is something you would want for your final setup.

The final thing that we gonna go over in this chapter is that you can either apply values to your margin top, right, bottom, and left individually by using the properties above or by coding it shorthand just like the border property. Below is an example:

margin: 5px 10px 5px 10px;

·And the order in which the values that you enter are top, right, bottom, left. So this line of code would give you a margin of 5 pixels on the top and bottom of your element and 10 pixels on the left and right sides. If you prefer to code shorthand for properties like this just remember in what order the values have to be entered. It is exactly the same order for the padding property if you want to code that shorthand as well.

Quiz Chapter 17

1.Padding is the space between the content and what?

2.A Margin is the space between the border and what?

3.What value is used to get rid of a margin?

4.In what order are your values entered shorthand for the margin properties?

5.If you had two elements, one above the other and you take the margin away from one of them. Is there still space between the two elements?