This paragraph has a 200 pixel width and 10 pixels of padding : measurement « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. measurement

This paragraph has a 200 pixel width and 10 pixels of padding

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title></title>
            <style type='text/css'>
        p#paragraph-1 {
            padding: 10px;
            width: 200px;
            border: 1px solid black;
            margin: 10px;
            background: gray;
        }
            </style>
        </head>
        <body>
      <p id='paragraph-1'>
          this is a test. 
      </p>
        </body>
    </html>








Related examples in the same category

1.Absolute Units
2.Relative Units
3.Testing 96 DPI Equals an Inch
4.Relative units giving rise to unequal side margins
5.Different measures
6.em is relative to the font size
7.Relative size font-size: .75em
8.width: size an element by assigning pixels, ems, a percentage, or another fixed measurement to width.
9.Percentages are more flexible because they can scale to the viewport.
10.width:100% stretches an element to the width of its parent.
11.Units of Length and Percentage
12.Absolute vs. Relative Measurements
13.one inch tall
14.inch measurement
15.font-size with various measurements
16.This font is 24 pixels tall and this div is 3 ems tall
17.The body's border is 1em thick
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