- 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 define not only the size of the element,
but also the 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 finally width of an element,
but as you can see, they're very important
in terms of how elements relate to each other
and how much space an element requires within 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 define the outside edge of an element,
and because they're 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.
You know 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 gonna 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 it's value is used to calculate the overall width
and height of an element.
Finally, we have the width and height properties.
You can set up 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 heighth 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.
The default total width of an element
is the sum of its left and right border values,
the left and right padding values,
and the elements width property.
This often confuses new designers
as they assume that the value applied
to the width property
represents the total width of the element.
That is possible now through the box-sizing property.
Box-sizing accepts two values.
Content-box or border-box.
The content-box property calculates width and heighth
using the default method that I just described.
The border-box property, however,
includes the border and padding values
into the width and heighth values
allowing you to set a total width of an element
through the width property.
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 quite common to see authors
set the width of an element to 100%
in order to make it fit fully within a parent element.
For the most part, that's fine,
but unless you're using the box sizing property,
any values for margin, borders, and padding
will force the total width to be actually 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.