http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FBox_Model%2Fmargin
HTML/CSS/Box Model/margin - История изменений
2026-04-04T22:27:26Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/margin&diff=5246&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/margin&diff=5247&oldid=prev
Admin: 1 версия
2010-05-26T08:16:41Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add margin to offset block nearby==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
margin: 0px;<br />
padding: 0px;<br />
color: #000;<br />
background-color: #ccc;<br />
}<br />
#content {<br />
padding: 10px 2% 10px 2%;<br />
margin: 5px 26% 5px 2%;<br />
background-color: #fff;<br />
border: 1px solid #000;<br />
}<br />
#menu {<br />
position: absolute;<br />
top: 0px;<br />
right: 0px;<br />
padding: 10px 2% 10px 2%;<br />
margin: 5px 2% 5px 1%;<br />
background-color: #fff;<br />
border: 1px solid #000;<br />
width: 18%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="menu"><br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
</div><br />
<div id="content"><br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. this is a test. <br />
</div><br />
</body><br />
<br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==A margin negative value moves it away from center.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
* .container {<br />
position: relative;<br />
background: black;<br />
}<br />
* .box {<br />
position: absolute;<br />
overflow: auto;<br />
visibility: visible;<br />
z-index: 1;<br />
bottom: 20px;<br />
margin: -30px;<br />
padding: 10px;<br />
background: red;<br />
}<br />
* .before {<br />
z-index: 2;<br />
width: 100px;<br />
height: 400px;<br />
left: 400px;<br />
right: auto;<br />
top: 100px;<br />
bottom: auto;<br />
background: yellow;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div class="container"> <br />
<div>BEFORE</div> <br />
<div class="before">ABSOLUTE BEFORE</div> <br />
<div class="box">this is a test. this is a test. </div> <br />
</div> <br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==Body margin to 10%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
margin: 10%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>header 2</h2><br />
<h3>header 3</h3><br />
<p>This is a text.</p><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Body with margin:%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
margin: 5% 10% 0 10%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="content"><br />
<h2>header 2<br />
<span id="boat"><br />
</span><br />
</h2><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Define Margin with value and percent==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p.normal {<br />
padding: 0;<br />
margin-left: 0;<br />
margin-right: 0;<br />
}<br />
p.large {<br />
margin-left: 33%;<br />
margin-right: 5%;<br />
}<br />
p.medium {<br />
margin-left: 15%;<br />
margin-right: 33%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>The heading for this page</h1><br />
<p class="normal">normal class.</p><br />
<p class="large">large class.</p><br />
<p class="medium ">medium class</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==double-margin==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div#container {<br />
margin: 0 20px;<br />
background: lightyellow;<br />
width: 300px;<br />
}<br />
div#float {<br />
margin-left: 50px;<br />
background: lightgrey;<br />
float: left;<br />
border: 1px solid black;<br />
width: 75px;<br />
height: 50px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="float"><br />
Float text.<br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==double margin fixed==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div#container {<br />
margin: 0 20px;<br />
background: red;<br />
width: 300px;<br />
height: 500px;<br />
}<br />
div#float {<br />
margin-left: 50px;<br />
background: lightgrey;<br />
float: left;<br />
border: 1px solid black;<br />
width: 75px;<br />
height: 50px;<br />
display: inline;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="float"><br />
Float text.<br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI margin: 0.33em 0.5em 0.5em 1.5em==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
width: 30%;<br />
padding: 0 0 0.75em 0; <br />
margin: 0; <br />
}<br />
li {<br />
text-indent: -0.75em; <br />
margin: 0.33em 0.5em 0.5em 1.5em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h3><br />
Table of Contents<br />
</h3><br />
<p><br />
As proposed, the contents of the paper will contain the <br />
following sections:<br />
</p><br />
<ul><br />
<li>Database</li><br />
<li>Privacy</li><br />
<li>Best</li><br />
<li>Automation?</li><br />
<li class="last">Smart Choice</li><br />
</ul><br />
<p><br />
let <a href="n@h.ru">Nicholas</a> know about it.<br />
</p><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h2 { <br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-repeat: no-repeat;<br />
background-position: bottom;<br />
margin: 10px 0 0 0;<br />
padding: 0.5em 0 60px 0;<br />
width: 600;<br />
height: 600;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>This is a header<br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
</h2><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin: 1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
padding: 10px;<br />
margin: 1em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Margin between parent and children==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
div {<br />
width: 100px;<br />
height: 100px;<br />
}<br />
div#parent {<br />
margin: 10px 20px;<br />
background: yellow;<br />
border: 1px solid gold;<br />
}<br />
div#child {<br />
margin: 20px;<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="parent"><br />
<div id="child"><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Margin between sibling==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
div {<br />
width: 100px;<br />
height: 100px;<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
}<br />
div#top {<br />
margin: 10px 20px;<br />
}<br />
div#bottom {<br />
margin: 20px;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="top"></div><br />
<div id="bottom"></div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin collapse==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
margin: 20px;<br />
padding: 20px;<br />
border: thin solid black;<br />
background: #ccc;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
This is the first paragraph.<br />
</p><br />
<p><br />
This is the second paragraph.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin collapse nested elements==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
margin: 20px;<br />
background: pink;<br />
}<br />
p {<br />
margin: 20px;<br />
padding: 20px;<br />
background: yellow;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p> No margins</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin collapse nested elements default padding==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
margin: 20px;<br />
padding: 20px;<br />
background: pink;<br />
}<br />
p {<br />
padding: 20px;<br />
background: red;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p> No margins, ey?</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin collapse nested elements padding==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
margin: 20px;<br />
padding: 20px;<br />
background: red;<br />
}<br />
p {<br />
margin: 0;<br />
padding: 20px;<br />
background: pink;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p> No margins</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin collapse with nested elements==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
margin: 20px;<br />
background: #ccc;<br />
}<br />
p {<br />
margin: 20px;<br />
padding: 20px;<br />
background: #ddd;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p> No margins</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Margin Collapsing==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
color: #353535;<br />
padding: 1em;<br />
}<br />
h1 {<br />
font-size: 2.4em;<br />
font-weight: normal;<br />
}<br />
<br />
.wrapper {<br />
width: 420px;<br />
border: 1px solid gray;<br />
margin: 20px;<br />
}<br />
<br />
#box1 {<br />
margin: 10px;<br />
background-color:#d5d5d5;<br />
}<br />
#box2 {<br />
margin: 10px;<br />
background-color:#d5d5d5;<br />
padding: 1px;<br />
}<br />
p {<br />
margin: 20px;<br />
background-color:#90C2F3;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="wrapper"><br />
<div id="box1"><br />
<p>This paragraph has a 20px margin.</p><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div id="box2"><br />
<p>This paragraph has a 20px margin.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Margin collapsing also happens between parent and child elements.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div.margin-wrapper {<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
float: left;<br />
margin: 5px;<br />
}<br />
div.margin-wrapper div {<br />
background: khaki;<br />
border: 1px solid black;<br />
width: 25px;<br />
height: 25px;<br />
}<br />
div#parent {<br />
margin: 5px;<br />
border: none;<br />
background: crimson;<br />
}<br />
div#child {<br />
margin: 5px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="margin-wrapper"><br />
<div id="parent"><br />
<div id="child">asdf</div><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Margin collapsing with adjacent siblings.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div.margin-wrapper {<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
float: left;<br />
margin: 5px;<br />
}<br />
div.margin-wrapper div {<br />
background: khaki;<br />
border: 1px solid black;<br />
width: 25px;<br />
height: 25px;<br />
}<br />
div#top {<br />
margin: 5px;<br />
}<br />
div#bottom {<br />
margin: 5px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="margin-wrapper"><br />
<div id="top">asdf</div><br />
<div id="bottom">asdf</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==margin sets the size of the margin surrounding the border.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
* .box {<br />
display: static;<br />
overflow: visible;<br />
visibility: visible;<br />
width: 160px;<br />
height: 150px;<br />
padding: 30px;<br />
margin-left: 230px;<br />
margin-top: 80px;<br />
background-color: #ccc;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<h1>Box Model</h1> <br />
<div class="box"></div> <br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set margin to 0==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h2 {<br />
margin: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>This is the title</h2><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set margin to5em 0"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
text-indent: 2.5em;<br />
margin: 0 0 0.5em 0;<br />
padding: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>The heading for this page</h1><br />
<p>This is a text.</p><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use margin to align block to center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 10px;<br />
padding: 0;<br />
}<br />
div {<br />
width: 50px;<br />
height: 50px;<br />
background: rgb(218, 220, 243);<br />
border: 1px solid rgb(154, 157, 203);<br />
}<br />
div#center {<br />
margin: 10px auto;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="center"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use margin to align block to left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 10px;<br />
padding: 0;<br />
}<br />
div {<br />
width: 50px;<br />
height: 50px;<br />
background: rgb(218, 220, 243);<br />
border: 1px solid rgb(154, 157, 203);<br />
}<br />
div#left {<br />
margin: 10px auto 10px 0;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="left"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use margin to align block to right==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 10px;<br />
padding: 0;<br />
}<br />
div {<br />
width: 50px;<br />
height: 50px;<br />
background: rgb(218, 220, 243);<br />
border: 1px solid rgb(154, 157, 203);<br />
}<br />
div#right {<br />
margin: 10px 0 10px auto;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="right"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use margin to offset child==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
div {<br />
width: 100px;<br />
height: 100px;<br />
}<br />
div#parent {<br />
margin: 10px 20px;<br />
background: yellow;<br />
}<br />
div#child {<br />
margin: 20px;<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="parent"><br />
<div id="child"><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==When all four values are provided, each is provided in order clockwise, beginning with the top property.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div.margin-wrapper {<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
float: left;<br />
margin: 5px;<br />
}<br />
div.margin-wrapper div {<br />
background: khaki;<br />
border: 1px solid black;<br />
width: 25px;<br />
height: 25px;<br />
}<br />
div#margin {<br />
margin: 4px 6px 8px 10px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="margin-wrapper"><br />
<div id="margin">asdf</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==When one value is supplied to the margin shorthand property, all four sides are specified with that one value.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div.margin-wrapper {<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
float: left;<br />
margin: 5px;<br />
}<br />
div.margin-wrapper div {<br />
background: red;<br />
border: 1px solid black;<br />
width: 25px;<br />
height: 25px;<br />
}<br />
div#margin-one {<br />
margin: 2px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="margin-wrapper"><br />
<div id="margin-one">asdf</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==When three values are supplied, the top is the first, the right and left sides are the second, and the bottom is the third.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div.margin-wrapper {<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
float: left;<br />
margin: 5px;<br />
}<br />
div.margin-wrapper div {<br />
background: khaki;<br />
border: 1px solid black;<br />
width: 25px;<br />
height: 25px;<br />
}<br />
div#margin-three {<br />
margin: 2px 10px 4px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="margin-wrapper"><br />
<div id="margin-three">asdf</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==When two values are supplied to the margin shorthand property, the top and bottom are the first, right and left sides are the second.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div.margin-wrapper {<br />
background: lightyellow;<br />
border: 1px solid gold;<br />
float: left;<br />
margin: 5px;<br />
}<br />
div.margin-wrapper div {<br />
background: red;<br />
border: 1px solid black;<br />
width: 25px;<br />
height: 25px;<br />
}<br />
div#margin-two {<br />
margin: 2px 10px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="margin-wrapper"><br />
<div id="margin-two">asdf</div><br />
</div><br />
</body><br />
</html><br />
</source></div>
Admin