css box model : CSS Basics « Style Basics « HTML / CSS






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

css box model

 
<!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;
        }
        p#paragraph-2 {
            padding: 20px;
            width: 180px;
            border: 1px solid black;
            margin: 10px;
            background: lightgrey;
        }
            </style>
        </head>
        <body>
      <p id='paragraph-1'>
          This paragraph has a 200 pixel width and 10 pixels of padding.
      </p>
      <p id='paragraph-2'>
          This paragraph has a 180-pixel width and 20 pixels of padding, and yet the 
          backgrounds of both paragraphs are lined up together.
      </p>
        </body>
    </html>








Related examples in the same category

1.Using Whitespace in CSS
2.Cascaded
3.HTML and CSS coding for inline-block elements
4.CSS Text Properties Example
5.Zero page gutter
6.Inline HTML elements include markup for explicit semantic purposes:
7.CSS can be used to control the presentation of an XHTML document
8.Box Model Demonstration
9.Width and height
10.Default Styles
11.horizontally stretching content
12.stretching content
13.Box model properties are always specified in order clockwise.
14.vertically stretching content
15.Update text color when mouse hover
16.Whitespace and Chunking
17.Multiple Columns