No matter what the topic, you can always find a handful of core concepts that
are critical to understanding the subject properly.
For CSS, the box model is certainly one of those concepts.
Without understanding the box model, almost every task related to the physical
relationships of elements would be more difficult.
If, on the other hand, you have a thorough grasp of the box model,
tasks like page layout become much easier.
So, what is the box model?
Well, the box model is the term used to describe the rules surrounding the
physical properties of all HTML elements.
If that makes you go, huh?
well, think about it this way.
Every single element on your web page is considered to be in a rectangular box.
The properties of this box, its width, height, padding, and margin defined not
only the sides of the element, but also how it relates to the elements
around it, so yeah, it's pretty important.
First, let's cover the basics, the properties that make up the box model.
Now, here we have a nice visual representation of an element's box.
This could be a paragraph, a heading, a list item, really any element on your page.
If we start on the outside of an element, the first item we encounter is
the element's margin.
Margins represent the space around an element and are used to define the space
between page elements.
Margins are not used to calculate the final width of an element, but as you can
see, they are very important in terms of how elements relate to each other and
how much space an element requires within a layout.
The next property we come to is the element's border.
All elements are allowed to have a border assigned to it, even though by
default, most elements don't have one.
Borders have three properties that define the border itself:
the border-width, border-style, and border-color.
You can also assign borders individually to the top, right, bottom, and left
sides of an element.
Borders are considered to be part of the box model because they defined the
outside edge of an element and because their physical size is used when
calculating the overall size of an element.
This often gets overlooked in many layouts, and more often than not, it can
cause serious problems.
Forgetting to add the size of the border to the size of an element can cause
tight layouts to break, as elements will be anywhere between two to four pixels
larger than anticipated.
After borders we have padding.
Padding is space added to an element inside the border.
Now the easiest way to think of this is to imagine a box with something fragile
inside of it that you need to ship.
More than likely, you're going to add some packing material to the box to keep
the fragile object from touching the edge of the box; that's padding.
Padding is totally transparent, and its value is used to calculate the overall
width and height of an element.
Finally, we have the width and height properties.
You can set these properties for any element using either percentages or a fixed
unit of measurement.
It's important to remember, however, that there's a big difference between the
width and height properties and the total width and height of an element.
This tends to be very confusing to those that are new to CSS or simply
unfamiliar with the box model.
To calculate the total width of an element, use the left and right border
values, the left and right padding values and the element's width property.
If you were thinking that this has probably tripped up a lot of designers,
you would be right.
Often layouts will break because the total width of an element is greater than anticipated.
However, understanding this concept gives you the ability to confidently set
values to all of the box model properties to fit specific layouts or regions.
The box model, for the most part, is pretty simple.
There are, however, a few things that can trip you up, if you're not careful.
First, just because a property isn't declared, don't assume that its value is zero.
Remember that all browsers have default styles that apply to HTML elements.
If you don't overwrite them, the default value will be applied.
It's also a quite common to see authors set the width of the element to 100% in
order to make it fit fully within a parent element.
For the most part, that's fine, but any values for margins, borders, and padding
will force the total width to be over 100%, making the element no longer fit.
There are other things, like margin collapse, floated elements and considerations
for undefined widths and heights, that you'll need to investigate as your
understanding of the box model deepens.
For now, concentrate on the fact that the properties that make up the box model
allow you to control the physical dimensions of the elements on your page, and
that to fully and truly master visually formatting your elements,
you'll need to understand the ins and outs of how those properties work.