As you apply margins, padding, and borders, it's easy to lose track of which element is responsible for gaps of space on the page or how much room these elements are taking up on the page.
Starting from the content itself and working outward, you can see the padding surrounds the content but is within the element. Then, the border goes around the edge of the element. And finally, the margin serves as space outside the element.
Each of these properties adds to the size of your element, so you need to consider this sum when fitting pieces of your website together. To figure out how much space is occupied across a line, you take the set width of the element plus the size of any left and right padding, the thickness of any left and right border, and the size of any left and right margin.
The same is done to see how much space is taken going down the webpage. In this case, you use your element's height and the top and bottom values of each property.
For example, you have a 600px-wide div. Inside it, you would like to place two images side by side, each with a margin of 10px and a 2px dark gray border. How wide can the images be to fit properly into this div?
First, we need to see how much space our additional properties are going to take up. Each image will have 10px of margin on the left and right, so that's a total of 40px. Then, each image will have a 2px border. Taking the left and right border of each of the two images gives us 8px worth of border. So we're at a total of 48px that our extra properties have taken up.
Subtract 48px from the 600px for the div's width, and you have 552px left for the images themselves. Divide that in half, and you get 276px as the widest you can make each image.
10 + 2 + 276 + 2 + 10 + 10 + 2 + 276 + 2 + 10 = 600
Use the matching activity below to test your understanding of the properties contained in the Box Model. Match each term to its corresponding definition.
