HTML/CSS/Box Model/Box model Basics

Материал из Web эксперт
Версия от 08:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

A percentage of the height of its container.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    float: left;
    right: 200px;
    height: 50%;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>



A percentage of the width of its container.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    float: left;
    right: 200px;
    width: 50%;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>



auto is the default value for width and height.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    float: left;
    right: 200px;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>



Block Box

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .box {
  display: block;
  overflow: auto;
  visibility: visible;
  width: 220px;
  height: 100px;
  margin: 10px auto;
  padding: 10px;
}
</style>
</head>
<body>
<div class="container"> 
<div class="default">BEFORE</div> 
<div class="box">this is a test </div> 
<div class="default">AFTER</div> 
</div> 
</body> 
</html>



block multiline inline box model with margin and 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">
                div {
                    margin: 10px;
                    background: #aaa;
                    height: 100px;
                }
                span#floated {
                    background: #ccc;
                    margin: 10px;
                    padding: 10px;
                    border: 1px solid black;
                    float: left;
                    width: 100px;
                }
                span#normal {
                    background: #ddd;
                    border: 1px solid black;
                    opacity: 0.7;
                    padding: 20px;
                    margin: 20px;
                }
            </style>
        </head>
        <body>
            <div>
                <span id="floated">
                    This span is floated left.
                </span>
                <span id="normal">
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                </span>
                This is extra text. This is extra text. This is extra text.
            </div>
        </body>
    </html>



border and padding shrink the inner box of stretched absolute boxes.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .container {
  position: relative;
  background: black;
}
* .box {
  position: absolute;
  overflow: auto;
  visibility: visible;
  z-index: 1;
  bottom: 20px;
  margin: -30px;
  padding: 10px;
  border: 50px solid pink;
  background: red;
}
* .before {
    z-index: 2;
  width: 100px;
  height: 400px;
  left: 400px;
  right: auto;
  top: 100px;
  bottom: auto;
    background: yellow;
}
</style>
</head>
<body>

<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>



Box Dimensions

 
Property         Purpose
height           Sets the height of a box
width            Sets the width of a box
line-height      Sets the height of a line of text (like leading in a layout program)
max-height       Sets a maximum height that a box can be
min-height       Sets the minimum height that a box can be
max-width        Sets the maximum width that a box can be
min-width        Sets the minimum width that a box can be



Box Model Basics

 
<html>
<head>
<title>Box Model Basics</title>
<style>
p {
  background-color: white;
  text-align: center;
  border-color: black;
  border-style: solid;
  padding: 15px;
}
</style>
</head>
<body>
<p>the &lt;p&gt; element.</p>
<p>a second &lt;p&gt; element.</p>
</body>
</html>



Box Model defines properties of: display, width, height, padding, border, margin, background, overflow, and visibility.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .box {
  display: static;
  overflow: visible;
  visibility: visible;
  width: 160px;
  height: 150px;
  padding: 30px;
  border-top: 30px solid gray;
  border-bottom: 30px solid black;
  border-left: 30px solid gray;
  border-right: 30px solid black;
  margin-left: 230px;
  margin-top: 80px;
  background-color: #ccc;
}
</style>
</head>
<body>

<h1>Box Model</h1> 
<div class="box"></div> 
</body> 
</html>



Box model for child and parent relationship

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  color: #000;
  background-color: #ccc;
}
#one {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
#two {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 300;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  width: 20%;
}
#three {
  position: absolute;
  top: -30px;
  left: -30px;
  z-index: 3;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
#four {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 4;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  width: 20%;
}

  </style>
</head>
<body>
  <div id="one">1<div id="two">2</div></div>
  <div id="four">4<div id="three">3</div></div>
</body>

</html>



Box model with div

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>box model</title>
        <style rel="stylesheet" type="text/css">
div#box-wrapper {
    background: gold;
    border: 1px solid blue;
}
div#box {
    border: 20px solid #f6c;
    margin: 20px;
    padding: 20px;
    background: #f90;
}
div#box-inner {
    background: pink;
    color: rgb(244, 244, 244);
}        
        </style>
    </head>
    <body>
        <div id="box-wrapper">
            <div id="box">
                <div id="box-inner">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing
                    elit. Proin consectetuer neque ac eros. Vivamus vel
                    nibh. Vestibulum aliquam neque a nisi. Nullam eu
                    turpis. Proin mi. Cras dictum semper felis. Maecenas
                    porttitor neque at dolor. Integer vel libero vitae
                    ante lobortis tristique. Morbi sapien diam, tristique
                    sed, placerat pharetra, luctus eget, neque.
                    Pellentesque leo mauris, sollicitudin a, malesuada
                    vitae, varius vitae, quam. Cras eget tellus vel nunc
                    dapibus pharetra.
                    Phasellus varius tincidunt quam. Maecenas viverra
                    mattis orci. Etiam porttitor luctus ligula. Ut ac
                    nibh. In commodo imperdiet sapien. Nulla vel sapien
                    sed mauris euismod pharetra. Quisque eu ante eget
                    pede tristique tincidunt. Curabitur eu erat eu libero
                    aliquam placerat. Pellentesque felis erat, cursus
                </div>
            </div>
        </div>
    </body>
</html>



Floating elements and element boxes

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Flowing Text Around Floating Elements</title>
      <style type = "text/css">
         div { background-color: #ffccff;
               margin-bottom: .5em;
               font-size: 1.5em;
               width: 50% 
         }
         p { 
               text-align: justify; 
         }
      </style>
   </head>
   <body>
      <div style = "text-align: center">
         this is a test. </div>
      <div style = "float: right; margin: .5em; 
         text-align: right">
         this is a test. this is a test. </div>
      <p>this is a test. this is a test. </p>
      <div style = "float: right; padding: .5em; 
         text-align: right">
         this is a test. this is a test. this is a test. this is a test. </div>
      <p>this is a test. this is a test. <span style = "clear: right">
      this is a test. this is a test. this is a test. </span></p>
   </body>
</html>



Float inside

 

<!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">
            div#container {
                margin: 0 20px;
                background: #ccc;
                width: 300px;
            }
            div#float {
                background: lightgrey;
                float: left;
                border: 1px solid black;
                width: 75px;
                height: 50px;
            }
            p {
                margin-left: 76px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="float">
                Float text.
            </div>
            <p>
                Paragraph text. Paragraph text. Paragraph text. 
                Paragraph text. Paragraph text. Paragraph text.
                Paragraph text. Paragraph text. Paragraph text.
            </p>
        </div>
    </body>
</html>



Float left in a container

 
<!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">
            div#container {
                border: thick dotted black;
                margin: 0 20px;
                background: lightyellow;
            }
            div#float {
                background: #ccc;
                float: left;
                border: 1px solid black;
                width: 150px;
                height: 150px;
            }
            ul {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="float">
                <p>
                    Float text. <a href="#">Content on</a>.
                    Float text. Float text. Float text. Float text. 
                    Float text. Float text. Float text. Float text.
                </p>
                <p>
                    This text is chopped off!  This text is chopped off! 
                    This text is chopped off!  This text is chopped off! 
                </p>
            </div>
            <ul>
                <li><a href="#">Content on.</a></li>
                <li><a href="#">Content on.</a></li>
                <li><a href="#">Content off.</a></li>
                <li><a href="#">Content off.</a></li>
                <li><a href="#">Content off.</a></li>
            </ul>
        </div>
    </body>
</html>



Inner box

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
body {
  margin: 0px;
  padding: 0px;
  line-height: 1.4em;
  color: #000;
  background-color: #ccc;
}
#content {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 90%;
}
.innerBox {
  padding: 0px 10px 0px 10px;
  margin: 0px;
  border: 1px solid #000;
}
#navBar {
  padding: 0px 10px 0px 10px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border-top: 0px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  text-align: right;
  width: 90%;
}
.nav {
  margin-top: 0px;
  margin-bottom: 5px;
}
</style>
<meta http-equiv="content-type"content="text/html;charset=iso-8859-1"/>
</head>
<body>
<div id="content">
<p>this is a test. this is a test. this is a test. .</p>
<div class="innerBox">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
<p>this is a test. this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="navBar">
<p class=nav>&lt;back |home |next&gt;</p>
</div>
</body>
</html>



Inner box padding and border

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
#content {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-right: 5%;
  margin-left: 5%;
  background-color: #fff;
  border: 1px solid #ccc;
}
.innerBox {
  padding: 0px 10px 0px 10px;
  margin: 0px;
  border: 1px solid #000;
}
#navBar {
  padding: 0px 10px 0px 10px;
  margin-top: -10px;
  margin-bottom: 5px;
  margin-right: 5%;
  margin-left: 5%;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: right;
}
.nav {
  margin-top: 0px;
  margin-bottom: 5px;
}

</style>
<meta http-equiv="content-type"content="text/html;charset=iso-8859-1"/>
</head>
<body>
<div id="content">
<p>this is a test. this is a test. this is a test. .</p>
<div class="innerBox">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
<p>this is a test. this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="navBar">
<p class=nav>&lt;back |home |next&gt;</p>
</div>
</body>
</html>



Inner box with DIV

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  line-height: 22px;
  color: black;
  background-color: #ccc;
}
.innerBox {
  padding: 10px;
  margin: 10px 0px 5px 0px;
  border: 1px solid #000;
}
#content {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
}
  </style>
</head>
<body>
  <div id="content">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
      <div class="innerBox">
      this is a test. this is a test. this is a test. this is a test. this is a test. 
      this is a test. this is a test. this is a test. this is a test. this is a test. 
      this is a test. this is a test. this is a test. this is a test. this is a test. 
      this is a test. this is a test. this is a test. this is a test. this is a test. 
      this is a test. this is a test. this is a test. this is a test. this is a test. 
      </div>
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
</body>
</html>



Left text alignment for inner box

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
body {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  line-height: 22px;
  color: black;
  background-color: #ccc;
}
#content {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  text-align: right; 
  width: 70%;
}

</style>
<meta http-equiv="content-type"content="text/html;charset=iso-8859-1"/>
</head>
<body>
<div id="content">
<p>this is a test. this is a test. this is a test. .</p>
<div class="box">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
<p>this is a test. this is a test. this is a test. this is a test. this is a test. </p>
</div>
</body>
</html>



Setting borders of an element

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Borders</title>
      <style type = "text/css">
         div     { text-align: center;
                   margin-bottom: 1em;
                   padding: .5em }
         .thick  { border-width: thick }
 
         .medium { border-width: medium }
         .thin   { border-width: thin }
         .groove { border-style: groove }
         .inset  { border-style: inset }
         .outset { border-style: outset }
         .red    { border-color: red }
         .blue   { border-color: blue }
      </style>
   </head>
   <body>
      <div class = "thick groove">this is a test. </div>
      <div class = "medium groove">this is a test. </div>
      <div class = "thin groove">this is a test. </div>
      <p class = "thin red inset">this is a test. </p>
      <p class = "medium blue outset">this is a test. </p>
   </body>
</html>



Setting box dimensions and aligning text

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Box Dimensions</title>
 
      <style type = "text/css">
         div { background-color: #ccc;
               margin-bottom: .5em 
         }
      </style>
   </head>
   <body>
      <div style = "width: 20%">this is a test. this is a test. this is a test. </div>
      <div style = "width: 80%; text-align: center">this is a test. this is a test. 
      this is a test. this is a test. this is a test. 
      </div>
      <div style = "width: 20%; height: 30%; overflow: scroll">
      this is a test. this is a test. this is a test. </div>
   </body>
</html>



Simple float clearing in Mozilla

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer,#outer2 {
  width: 500px;
  background: #ccc;
  border: 1px solid #000;
}
.inner,.inner2 {
  width: 300px;
  background: #aaa;
  border: 5px solid blue;
  padding: 5px 0;
  overflow: hidden;
  margin: 5px;
}
img {
  float: left;
  margin: 5px;
  border: 1px solid #000
}

</style>
</head>
<body>
<div id="outer"> 
  <div class="inner"> <img src="http://www.wbex.ru/style/logo.png" width="100" height="67" /> 
    <p>Some descriptive text</p>
  </div>
</div>
</body>
</html>



Spacing: indentation, margins, padding, letter spacing, word spacing, text justification, and line spacing

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .elegant {
  margin-left: 40px;
  margin-right: 80px;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 25px;
  padding-bottom: 25px;
  letter-spacing: 1px;
  word-spacing: 2px;
  line-height: 1.7em;
  text-indent: 40px;
  text-align: justify;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p>indentation, margins, padding, letter spacing, word spacing, text justification, or line spacing.</p> 
<p class="elegant">this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. </p> 
</body>
</html>



Table Box

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .table {
  border-collapse: separate;
  table-layout: auto;
  visibility: visible;
  width: auto;
  height: auto;
  margin: 30px 50px;
}
* .cell {
  width: auto;
  height: auto;
  padding: 20px 50px;
  overflow: hidden;
}
</style>
</head>
<body>
<div> 
<table><tr><td>BEFORE</td></tr></table> 
<table class="table"> 
<tr><td class="cell">Table Cell </td><td class="cell">Table Cell </td></tr> 
</table> 
<table><tr><td>AFTER</td></tr></table> 
</div> 
</div> 
</body> 
</html>



The margin Properties

 
<html>
<head>
<title>The margin Properties</title>
<style>
body {
  background-color: silver;
  font-size: 1.3em;
}
p {
  background-color: white;
  text-align: center;
}
.inches {
  margin-right: 2.5in;
}
.margin-l25 {
  margin-left: 25%;
}
.ems {
  margin-top: -.75em;
}
.percentage {
  margin-bottom: 15%;
}
.auto {
  margin-left: 25%;
  margin-right: auto;
}
}
</style>
</head>
<body>
<p>The margin properties control the space around
the <i>outside</i> of an element.</p>
<p class="inches">The right margin is set at 2.5 inches.</p>
<p class="margin-l25">Left margin is set at 25%.</p>
<p class="ems">Top margin is set to -.75 em.</p>
<p class="percentage">Bottom margin set to 15%.</p>
<p>No margin settings</p>
</body>
</html>



The Padding Properties

 
<html>
<head>
<title>The Padding Properties</title>
<style>
body {
  background-color: silver;
  font-size: 1.5em;
}
p {
  background-color: white;
}
.padtop {
  padding-top: 20px;
}
.padright {
  text-align: right;
  padding-right: .50in;
}
.padbot {
  padding-bottom: 1em;
}
.padleft {
  padding-left: 25%
}
.pad {
  padding: 10%
}
</style>
</head>
<body>
<p class="padtop">Top padding of 20 pixels</p>
<p class="padright">Right padding of .50 inches</p>
<p class="padbot">Bottom padding of 1 em</p>
<p class="padleft">Left padding of 25%</p>
<p class="pad">Padding of 10% all around</p>
</body>
</html>



Understanding the Box Model

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Understanding the Box Model</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}
body,h1,p,img,b {
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
  padding: 2px;
}
h1,b {
  background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Thinking Inside the Box</h1>
<p class="description"><b>boxes</b></p>
<img src="http://www.wbex.ru/style/logo.png" alt="How CSS treats a box" />
<p><b>border</b><BR/><b>padding</b><BR/><BR/><b>margin</b><BR/><BR/></p>
</body>
</html>



Width setting

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>width</title>
        <style rel="stylesheet" type="text/css">
div#wrapper {
    border: 1px solid white;
    background: gold;
    width: 280px;
}
div#box {
    margin: 5px;
    border: 5px solid khaki;
    background: yellow;
    padding: 5px;
    width: 250px;
}
div#inner {
    background: white;
    text-align: justify;
}        
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="box">
                <div id="inner">
                    Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>
                    Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>
                    Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>
                    Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>Peter<BR/>
                </div>
            </div>
        </div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Box_model_Basics&oldid=5315»