Admin: 1 версия

2010-05-26T08:16:47Z

1 версия

Новая страница

==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>
<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>
</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>
<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>
</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>
<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>
</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">
<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>
</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>
<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>
</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">
<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>
</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>
<p>the <p> element.</p>
<p>a second <p> element.</p>
</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">
<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>
</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">
<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>
</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">
<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>
</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">
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</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">
<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>
</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>
<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>
</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">
<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>
</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">
<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>
</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>
<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>
</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">
<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>
</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">
<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>
</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>
<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>
</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>
<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>
</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">
<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>
</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">
<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>
</source>

HTML/CSS/Box Model/Box model Basics - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)