HTML/CSS/Box Model/Box model Basics
Содержание
- 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 for child and parent relationship
- 11 Box model with div
- 12 Floating elements and element boxes
- 13 Float inside
- 14 Float left in a container
- 15 Inner box
- 16 Inner box padding and border
- 17 Inner box with DIV
- 18 Left text alignment for inner box
- 19 Setting borders of an element
- 20 Setting box dimensions and aligning text
- 21 Simple float clearing in Mozilla
- 22 Spacing: indentation, margins, padding, letter spacing, word spacing, text justification, and line spacing
- 23 Table Box
- 24 The margin Properties
- 25 The Padding Properties
- 26 Understanding the Box Model
- 27 Width setting
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 <p> element.</p>
<p>a second <p> 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><back |home |next></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><back |home |next></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>