To understand the box model, you are going to look at its representation in the DevTools. Save styles.css, switch to Chrome, and make sure the DevTools are open (Figure 3.6).

Figure 3.6  Exploring the box model

Click the button in the upper-left of the elements panel. This is the Inspect Element button. Now move your cursor over the word “ottergram” on the web page. As you hover over the word, the DevTools surrounds the heading with a blue- and peach-colored rectangle (Figure 3.7).

Figure 3.7  Hovering over the heading

Click the word “ottergram” on the web page. Although you no longer see the multicolored overlay, the element is now selected and the DOM tree view in the elements panel will expand to show and highlight the corresponding <h1> tag.

The rectangular diagram in the lower-right of the elements panel represents the box model for the h1 element. You can see that the regions of the diagram have some of the same colors as the rectangle you saw overlaying the heading when you inspected it (Figure 3.8).

Figure 3.8  Viewing the box model for an element

The box model incorporates four aspects of the rectangle drawn for an element (which the DevTools renders in four different colors in the diagram).

The numbers in Figure 3.8 are pixel values; a pixel is a unit corresponding to the smallest rectangular area of a computer screen that can display a single color. In the case of the h1 element, the content area has been allocated an area of 197 pixels by 54 pixels (your values may be different, depending on the size of your browser window). There is padding of 40 pixels on the left side. The border is set at 0, and there is a margin of 16 pixels above and below the element.

Where did that margin value come from? Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults. Because you have not specified values for the h1 element’s box, the default styles have been applied.

Now you are ready to understand the styling declarations you added:

.thumbnail-title {
  display: block;
  margin: 0;
  padding: 4px 10px;

  background: rgb(96, 125, 139);
  color: rgb(202, 238, 255);
}

The display: block declaration changes the box for all elements of the class .thumbnail-title so that they occupy the entire width allowed by their containing element. (Notice in Figure 3.6 that the background color for the titles now covers a wider area.) Other display values, such as the display: inline property you will see later, make an element’s width fit to its content.

You also set the margin for the thumbnail titles to 0 and the padding to two different values: 4px and 10px (px is the abbreviation for “pixels”). This sets the padding to specific pixel values, overriding the default size set by the user agent stylesheet.

Padding, margin, and certain other styles can be written as shorthand properties, in which one value is applied to multiple properties. You are taking advantage of this here: When two values are provided for the padding, the first is applied to both vertical values (top and bottom) and the second is applied to both horizontal values (left and right). It is also possible to provide a single value to be applied to all four sides or to specify a separate value for each side.

To sum up, your new declarations say that the box for all elements of the .thumbnail-title class will fill the width of its container with no margin and with padding that is 4 pixels at the top and bottom and 10 pixels at the left and right sides.