The box model defines how wide and tall elements on a page will be. To determine the horizontal space an element occupies, you add up the content + padding-left + padding-right + border-left + border-right + margin-left + margin-right:
So let's take a look at this in practice by looking at the h1 on our site, which is the blue text that says, "Old Chompy".
Here is the ruleset that makes this headline look the way it does:
h1 {
font-size: 40px;
line-height:1.4;
font-weight: bold;
color: #0072ae
}
Let's add in the following properties ...
