Chrome DevTools – Elements > Metrics

The Metrics side panel shows 4 bits of information. E.g. in this screenshot:

The perimeter of each of the four areas is called an “edge” so each box has four edges.

Reading from the inside out:

1. Content edge: 1400 (width) x 52 (height)

This surrounds the rectangle given by the width and height of the box. It’s the intrinsic size of the content and often depends on the rendered content.

Padding edge (optional): 0

This edge surrounds the box padding.

Border: 0

The border edge surrounds the box’s border. If the border has 0 width the border edge is the same as the padding edge.

Margin: 80 (top and bottom)

The margin edge surrounds the box margin.

More information:

Box model:

http://www.w3.org/TR/CSS2/box.html

Visual formatting model details:

http://www.w3.org/TR/CSS2/visudet.html

Inline formatting mode and the rules laid out in CSS2:

http://meyerweb.com/eric/css/inline-format.html

 

Leave a Reply

Your email address will not be published. Required fields are marked *