Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we move on to talk about floating and positioning, but we need to first discuss the box model. Understanding the box model is crucial to controlling page layout. Every element in your document is contained within a box, even the inline level elements. Browsers use an element's box properties to determine how much space it takes up in the layout. Taking control of these values allows you a lot more control over your layout. The box model is made up of five basic properties; an element's width, height padding, border and margins. Backgrounds do take advantage of the box model and they display all the way inside of an element to the element's border but they aren't technically part of the box model. So when you're defining an element's width and height, a lot of people have the mistaken impression that that is the entire width and height of the element. And that's not true.
The specified width and height controls that content only. After the width and height of the contents, we have padding. The padding pushes the content away from the edge of the element itself. After the padding, we have the border. The border is optional but it can have a defined width, Color and Style. After borders, we have margins. margins help push our element away from other elements on the page and help us to find the relationship between one element to another. So if we are trying to calculate the entire width of an element, we have to calculate the width of the borders, the width of the padding so if we put 20 pixels over the padding, for example, all the way around our art work, we get 20 pixels on left, 20 pixels on right, so that's 40 pixels. And then finally, we have the width of the content.
Now if we don't define that width, the width is defined by the content itself or the area it's contained inside of. The best way to truly understand the box model is to control these properties for yourself. So let's dive in and set some values. Okay, here we are back in Dreamweaver and I have got the box_mode.htm file opened from the 10_03 folder. Now on our page, we have a paragraph which is contained inside of DIV tag with an ID of container. We are going to use those two elements to explore our box model properties. If you notice over the CSS Style panel, we already have selectors written for them and we can just start adding the properties that we need.
Let's start with the container element. Let's go and add a width property to that and I go ahead assign a width of 300 pixels. Go ahead and add a height property to it and give it height of 300 pixels as well. You can see the dramatic change in the container element, for example, we currently see the background of it now. Now choose the # containerp selector and let's affect the paragraph inside of it. Go ahead and give it a width of 100 pixels and then give it a height of 100 pixels as well. Now I want to point out that you shouldn't always trust what you see inside of a Dreamweaver. If we will save this file, for example, and Preview it in our Browser, you can see that the paragraph is aligning to the upper left hand corner of the container element and that's what we would expect but Dreamweaver is showing some default margins and padding that are not be taken into account here.
Now next stuff, we have got padding. So almost like the container element and I'm going ahead and add the padding property to it. Let's give it padding to 20 pixels. We will do the same thing for our interior paragraph. We give it padding but this time we will only do 10 pixels. Now note the change that just happened. Our container DIV tag just got a lot wider and the paragraph is now being restore from the edge and if we look inside of our paragraph, our paragraph is now a bit wider as well and note that text isn't budding up right against the edge of the paragraph either.
Now after padding, we have borders. So I'm going to go up to my container element. I will go and add the border Property and we will give it 1 pixel border solid #0000. So one pixel, solid black border. Let's select the paragraph inside the container. We will give it a border as well and we will give it 1 pixel solid #3333. So if I save that and test it, we can see a pretty dramatic change in our paragraph and how it's relating to its container element.
Let's finish this up by playing around little bit with margins. Go ahead and select your Container Paragraph, add a Property and go ahead and give it margin. Why don't we give it a margin of 20 pixels all the way around? Save that and test it. So now we are able to control the placement of the paragraph inside the parent element by using these margins. If we were to factor of the total width and height of this, notice we have 100 pixels wide Paragraph, we have 10 pixels of the padding on the either side so that's 120 pixels and then finally we have the border. So it's 122 pixels.
In terms of the distance that it is away from the edge of its container element, we have got 20 pixels worth of margin that go all the way round but also don't forget about the 20 pixels worth of padding that's inside of our container element. So it's actually being held off 40 pixels away from the top and left edges of the parent element. Now that we have handle on margins, borders, padding, height and width and how they affect overall dimensions and relationships with other elements on the page, we can move on to talk more about layout specific topics. Next stuff we will using the CSS Float Property for layout.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.