The body's border is 1em thick : measurement « Style Basics « HTML / CSS

HTML / CSS » Style Basics » measurement 
The body's border is 1em thick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
        <title> em measurement </title>
        <style type='text/css' media='all'>
          body {
            border: 1em solid black;
            margin: 0;
            padding: 10px;  
            div {
                font-size: 24px;
                height: 3em;
                border: 1em solid black;
        This is a test. 
            This font is 24 pixels tall and this div is ems tall, 
            which results in a div 72 pixels tall (24 72). Its 
            border is 1em thick, or 24 pixels thick.

Related examples in the same category
1.Absolute Units
2.Relative Units
3.Testing 96 DPI Equals an Inch
4.This paragraph has a 200 pixel width and 10 pixels of padding
5.Relative units giving rise to unequal side margins
6.Different measures
7.em is relative to the font size
8.Relative size font-size: .75em
9.width: size an element by assigning pixels, ems, a percentage, or another fixed measurement to width.
10.Percentages are more flexible because they can scale to the viewport.
11.width:100% stretches an element to the width of its parent.
12.Units of Length and Percentage
13.Absolute vs. Relative Measurements inch tall
15.inch measurement
16.font-size with various measurements
17.This font is 24 pixels tall and this div is 3 ems tall
18.font-size: 1in
19.inch vs pixel
20.percentage measurement width
21.A negative margin
22.This paragraph has a 1 pixel thick, solid black border around it.
23.Comparing em to Pixels
24.This font is 1.2 smaller than the default size, or pixels.
25.em measurement
26.ex measurement
27.inch measurement 2
28.inch vs pixels
29.Em Measurement Comparison to Pixels
30.percentage measurement
31.12 pixel base  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.