ptg16476052The Box Model 1758
The Chrome Developer Tools will display the box properties for an element so that
you can see its current size along with its border, margin, and padding. You can use the
Inspect tool to choose an element on the page, or you can locate an element in the source
by way of the Elements tab. Then choose Metrics in the right column, and you’ll see a
box representing the element along with its properties. You can see the Metrics view in
Figure 8.5.
Borders
Before I talk about padding or margins, I want to talk about borders. CSS provides sev-
eral properties for adding borders around elements and changing how they are displayed.
Using CSS, you can apply a border to any box.
The border-style property specifies the type of border that will be displayed. Valid
options for the border-style are none, dotted, dashed, solid, double, groove, ridge,
inset, outset, and inherit. Most of the styles alter the border appearance, but none and
inherit are special. Setting the border-style to none disables borders, and inherit
uses the border-style inherited from a less-specific selector.
The border-width property specifies how wide the border around a box should be.
Borders are usually specified in pixels, but any CSS unit of measurement can be used. To
create a 1-pixel, dashed border around all the anchors on a page, you use the following
CSS:
a { border-width: 1px; border-style: solid; }
FIGURE 8.5
The Metrics view
in the Chrome
Developer Tools.