Содержание

1 A percentage of the height of its container.
2 A percentage of the width of its container.
3 auto is the default value for width and height.
4 Block Box
5 block multiline inline box model with margin and padding
6 border and padding shrink the inner box of stretched absolute boxes.
7 Box Dimensions
8 Box Model Basics
9 Box Model defines properties of: display, width, height, padding, border, margin, background, overflow, and visibility.
10 Box Model
11 Thinking Inside the Box
- 11.1 Width setting

A percentage of the height of its container.

   <source lang="html4strict">

<!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>

this is a test.
this is a test. this is a test. this is a test.

this is a test

</body> </html>

</source>

A percentage of the width of its container.

   <source lang="html4strict">

<!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>

this is a test.
this is a test. this is a test. this is a test.

this is a test

</body> </html>

</source>

auto is the default value for width and height.

   <source lang="html4strict">

<!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>

this is a test.
this is a test. this is a test. this is a test.

this is a test

</body> </html>

</source>

Block Box

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.box {

 display: block;
 overflow: auto;
 visibility: visible;
 width: 220px;
 height: 100px;
 margin: 10px auto;
 padding: 10px;

} </style> </head> <body>

BEFORE

this is a test

AFTER

</body> </html>

</source>

block multiline inline box model with margin and padding

   <source lang="html4strict">

<!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>

               
                   This span is floated left.
               
               
                   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.
               
               This is extra text. This is extra text. This is extra text.

       </body>
   </html>
</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.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>

BEFORE

ABSOLUTE BEFORE

this is a test. this is a test.

</body> </html>

</source>

Box Dimensions

   <source lang="html4strict">

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

</source>

Box Model Basics

   <source lang="html4strict">

<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>

the <p> element.

a second <p> element.

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.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>

Box Model

</body> </html>

</source>

Box model for child and parent relationship

   <source lang="html4strict">

<?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">

 <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>

1

2

4

3

</body>

</html>

</source>

Box model with div

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <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>

                   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

   </body>

</html>

</source>

Floating elements and element boxes

   <source lang="html4strict">

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <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>

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.

  </body>

</html>

</source>

Float inside

   <source lang="html4strict">

<!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>

               Float text.

Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text. Paragraph text.

   </body>

</html>

</source>

Float left in a container

   <source lang="html4strict">

<!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>

Float text. <a href="#">Content on</a>. Float text. Float text. Float text. Float text. Float text. Float text. Float text. Float text.

This text is chopped off! This text is chopped off! This text is chopped off! This text is chopped off!

<a href="#">Content on.</a>
<a href="#">Content on.</a>
<a href="#">Content off.</a>
<a href="#">Content off.</a>
<a href="#">Content off.</a>

   </body>

</html>

</source>

Inner box

   <source lang="html4strict">

<!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>

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.

</body> </html>

</source>

Inner box padding and border

   <source lang="html4strict">

<!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>

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.

</body> </html>

</source>

Inner box with DIV

   <source lang="html4strict">

<?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">

 <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>

 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.

     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.

 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.

</body> </html>

</source>

Left text alignment for inner box

   <source lang="html4strict">

<!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>

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.

</body> </html>

</source>

Setting borders of an element

   <source lang="html4strict">

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <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>

this is a test.

  </body>

</html>

</source>

Setting box dimensions and aligning text

   <source lang="html4strict">

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <head>
     <title>Box Dimensions</title>

     <style type = "text/css">
        div { background-color: #ccc;
              margin-bottom: .5em 
        }
     </style>
  </head>
  <body>

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.

  </body>

</html>

</source>

Simple float clearing in Mozilla

   <source lang="html4strict">

<!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>

Some descriptive text

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

.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>

indentation, margins, padding, letter spacing, word spacing, text justification, or line spacing.

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.

</body> </html>

</source>

Table Box

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.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>

BEFORE

Table Cell

AFTER

</div> </body> </html>

</source>

The margin Properties

   <source lang="html4strict">

<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>

The margin properties control the space around the outside of an element.

The right margin is set at 2.5 inches.

Left margin is set at 25%.

Top margin is set to -.75 em.

Bottom margin set to 15%.

No margin settings

</body> </html>

</source>

The Padding Properties

   <source lang="html4strict">

<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>

Top padding of 20 pixels

Right padding of .50 inches

Bottom padding of 1 em

Left padding of 25%

Padding of 10% all around

</body> </html>

</source>

Understanding the Box Model

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <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>

Thinking Inside the Box

boxes

border
padding

margin

</body> </html>

</source>

Width setting

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <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>

                   Peter
Peter
Peter
Peter
Peter

                   Peter
Peter
Peter
Peter
Peter

                   Peter
Peter
Peter
Peter
Peter

                   Peter
Peter
Peter
Peter
Peter

   </body>

</html>

</source>

HTML/CSS/Box Model/Box model Basics

Содержание

A percentage of the height of its container.

A percentage of the width of its container.

auto is the default value for width and height.

Block Box

block multiline inline box model with margin and padding

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

Box Dimensions

Box Model Basics

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

Box Model

Box model for child and parent relationship

Box model with div

Floating elements and element boxes

Float inside

Float left in a container

Inner box

Inner box padding and border

Inner box with DIV

Left text alignment for inner box

Setting borders of an element

Setting box dimensions and aligning text

Simple float clearing in Mozilla

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

Table Box

The margin Properties

The Padding Properties

Understanding the Box Model

Thinking Inside the Box

Width setting

Навигация

Поиск