HTML/CSS/Box Model/margin

Материал из Web эксперт
Перейти к: навигация, поиск

Содержание

Add margin to offset block nearby

 

<?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;
}
#content {
  padding: 10px 2% 10px 2%;
  margin: 5px 26% 5px 2%;
  background-color: #fff;
  border: 1px solid #000;
}
#menu {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 2% 10px 2%;
  margin: 5px 2% 5px 1%;
  background-color: #fff;
  border: 1px solid #000;
  width: 18%;
}
  </style>
</head>
<body>
  <div id="menu">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 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>
  <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>
</body>

</html>



A margin negative value moves it away from center.

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



Body margin to 10%

 
<!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">
    <head>
        <title></title>
<style type="text/css">
body {
  margin: 10%;
}
</style>
    </head>
    <body>
<h2>header 2</h2>
<h3>header 3</h3>
<p>This is a text.</p>

    </body>
</html>



Body with margin:%

 
<!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">
body {
 margin: 5% 10% 0 10%;
}
</style>
</head>
<body>
  <div id="content">
     <h2>header 2
      <span id="boat">
      </span>
     </h2>
    </div>
</body>
</html>



Define Margin with value and percent

 
<!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">
p.normal {
 padding: 0;
 margin-left: 0;
 margin-right: 0;
}
p.large {
 margin-left: 33%;
 margin-right: 5%;
}
p.medium {
 margin-left: 15%;
 margin-right: 33%;
}
</style>
</head>
<body>
  <h1>The heading for this page</h1>
  <p class="normal">normal class.</p>
  <p class="large">large class.</p>
  <p class="medium ">medium class</p>
</body>
</html>



double-margin

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



double margin fixed

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



LI margin: 0.33em 0.5em 0.5em 1.5em

 
<!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">
ul {
 width: 30%;
 padding: 0 0 0.75em 0; 
 margin: 0; 
}
li {
 text-indent: -0.75em; 
 margin: 0.33em 0.5em 0.5em 1.5em;
}
</style>
</head>
<body>
  <h3>
   Table of Contents
  </h3>
  <p>
   As proposed, the contents of the paper will contain the 
  following sections:
  </p>
  <ul>
   <li>Database</li>
   <li>Privacy</li>
   <li>Best</li>
   <li>Automation?</li>
   <li class="last">Smart Choice</li>
  </ul>
  <p>
   let <a href="n@h.ru">Nicholas</a> know about it.
  </p>
  
</body>
</html>



margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement.

 

<!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">
h2 { 
 background-image: url(http://www.wbex.ru/style/logo.png);
 background-repeat: no-repeat;
 background-position: bottom;
 margin: 10px 0 0 0;
 padding: 0.5em 0 60px 0;
 width: 600;
 height: 600;
}
</style>
</head>
<body>
  <h2>This is a header
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  </h2>
  <p>This is a text.</p>
</body>
</html>



margin: 1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).

 
<!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">
div {
   height: 150px;
   width: 150px;
   padding: 10px;
   margin: 1em;
}
</style>
</head>
<body>
  <div>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
</body>
</html>



Margin between parent and children

 
<!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>margin</title>
        <style rel="stylesheet" type="text/css">
body {
    margin: 0;
    padding: 0;
}
div {
    width: 100px;
    height: 100px;
}
div#parent {
    margin: 10px 20px;
    background: yellow;
    border: 1px solid gold;
}
div#child {
    margin: 20px;
    background: lightyellow;
    border: 1px solid gold;
}        
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child">
            </div>
        </div>
    </body>
</html>



Margin between sibling

 

<!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>margin</title>
        <style rel="stylesheet" type="text/css">
body {
    margin: 0;
    padding: 0;
}
div {
    width: 100px;
    height: 100px;
    background: lightyellow;
    border: 1px solid gold;
}
div#top {
    margin: 10px 20px;
}
div#bottom {
    margin: 20px;
}        
        </style>
    </head>
    <body>
        <div id="top"></div>
        <div id="bottom"></div>
    </body>
</html>



margin collapse

 
<!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">
                p {
                    margin: 20px;
                    padding: 20px;
                    border: thin solid black;
                    background: #ccc;
                }
            </style>
        </head>
        <body>
            <p>
                This is the first paragraph.
            </p>
            <p>
                This is the second paragraph.
            </p>
        </body>
    </html>



margin collapse nested elements

 
<!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: 20px;
                    background: pink;
                }
                p {
                    margin: 20px;
                    padding: 20px;
                    background: yellow;
                }
            </style>
        </head>
        <body>
        <div>
            <p> No margins</p>
        </div>
        </body>
    </html>



margin collapse nested elements default 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: 20px;
                    padding: 20px;
                    background: pink;
                }
                p {
                    padding: 20px;
                    background: red;
                }
            </style>
        </head>
        <body>
        <div>
            <p> No margins, ey?</p>
        </div>
        </body>
    </html>



margin collapse nested elements 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: 20px;
                    padding: 20px;
                    background: red;
                }
                p {
                    margin: 0;
                    padding: 20px;
                    background: pink;
                }
            </style>
        </head>
        <body>
        <div>
            <p> No margins</p>
        </div>
        </body>
    </html>



margin collapse with nested elements

 
<!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: 20px;
                    background: #ccc;
                }
                p {
                    margin: 20px;
                    padding: 20px;
                    background: #ddd;
                }
            </style>
        </head>
        <body>
        <div>
            <p> No margins</p>
        </div>
        </body>
    </html>



Margin Collapsing

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
  color: #353535;
  padding: 1em;
}
h1 {
  font-size: 2.4em;
  font-weight: normal;
}

.wrapper {
  width: 420px;
  border: 1px solid gray;
  margin: 20px;
}

#box1 {
  margin: 10px;
  background-color:#d5d5d5;
}
#box2 {
  margin: 10px;
  background-color:#d5d5d5;
  padding: 1px;
}
p {
  margin: 20px;
  background-color:#90C2F3;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="box1">
<p>This paragraph has a 20px margin.</p>
</div>
</div>
<div class="wrapper">
<div id="box2">
<p>This paragraph has a 20px margin.</p>
</div>
</div>
</body>
</html>



Margin collapsing also happens between parent and child elements.

 
<!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>margin</title>
        <style rel="stylesheet" type="text/css">
div.margin-wrapper {
    background: lightyellow;
    border: 1px solid gold;
    float: left;
    margin: 5px;
}
div.margin-wrapper div {
    background: khaki;
    border: 1px solid black;
    width: 25px;
    height: 25px;
}
div#parent {
    margin: 5px;
    border: none;
    background: crimson;
}
div#child {
    margin: 5px;
}
        
        </style>
    </head>
    <body>
       <div class="margin-wrapper">
            <div id="parent">
                <div id="child">asdf</div>
            </div>
        </div>
    </body>
</html>



Margin collapsing with adjacent siblings.

 


<!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>margin</title>
        <style rel="stylesheet" type="text/css">
div.margin-wrapper {
    background: lightyellow;
    border: 1px solid gold;
    float: left;
    margin: 5px;
}
div.margin-wrapper div {
    background: khaki;
    border: 1px solid black;
    width: 25px;
    height: 25px;
}
div#top {
    margin: 5px;
}
div#bottom {
    margin: 5px;
}
        
        </style>
    </head>
    <body>
        <div class="margin-wrapper">
            <div id="top">asdf</div>
            <div id="bottom">asdf</div>
        </div>
    </body>
</html>



margin sets the size of the margin surrounding the border.

 

<!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;
  margin-left: 230px;
  margin-top: 80px;
  background-color: #ccc;
}
</style>
</head>
<body>

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



Set margin to 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></title>
<style type="text/css">
h2 {
 margin: 0;
}
</style>
</head>
<body>
  <h2>This is the title</h2>
  <p>This is a text.</p>
</body>
</html>



Set margin to5em 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></title>
<style type="text/css">
p {
 text-indent: 2.5em;
 margin: 0 0 0.5em 0;
 padding: 0;
}
</style>
</head>
<body>
  <h1>The heading for this page</h1>
  <p>This is a text.</p>
  <p>This is a text.</p>
</body>
</html>



Use margin to align block to center

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>margin</title>
        <style rel="stylesheet" type="text/css">
body {
    margin: 10px;
    padding: 0;
}
div {
    width: 50px;
    height: 50px;
    background: rgb(218, 220, 243);
    border: 1px solid rgb(154, 157, 203);
}
div#center {
    margin: 10px auto;
}
      
        </style>
    </head>
    <body>
        <div id="center">
        </div>
    </body>
</html>



Use margin to align block to left

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>margin</title>
        <style rel="stylesheet" type="text/css">
body {
    margin: 10px;
    padding: 0;
}
div {
    width: 50px;
    height: 50px;
    background: rgb(218, 220, 243);
    border: 1px solid rgb(154, 157, 203);
}
div#left {
    margin: 10px auto 10px 0;
}
      
        </style>
    </head>
    <body>
        <div id="left">
        </div>
    </body>
</html>



Use margin to align block to right

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>margin</title>
        <style rel="stylesheet" type="text/css">
body {
    margin: 10px;
    padding: 0;
}
div {
    width: 50px;
    height: 50px;
    background: rgb(218, 220, 243);
    border: 1px solid rgb(154, 157, 203);
}
div#right {
    margin: 10px 0 10px auto;
}
      
        </style>
    </head>
    <body>
        <div id="right">
        </div>
    </body>
</html>



Use margin to offset child

 

<!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>margin</title>
        <style rel="stylesheet" type="text/css">
body {
    margin: 0;
    padding: 0;
}
div {
    width: 100px;
    height: 100px;
}
div#parent {
    margin: 10px 20px;
    background: yellow;
}
div#child {
    margin: 20px;
    background: lightyellow;
    border: 1px solid gold;
}        
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child">
            </div>
        </div>
    </body>
</html>



When all four values are provided, each is provided in order clockwise, beginning with the top property.

 
<!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>margin</title>
        <style rel="stylesheet" type="text/css">
div.margin-wrapper {
    background: lightyellow;
    border: 1px solid gold;
    float: left;
    margin: 5px;
}
div.margin-wrapper div {
    background: khaki;
    border: 1px solid black;
    width: 25px;
    height: 25px;
}
div#margin {
    margin: 4px 6px 8px 10px;
}
        
        </style>
    </head>
    <body>
        <div class="margin-wrapper">
            <div id="margin">asdf</div>
        </div>
    </body>
</html>



When one value is supplied to the margin shorthand property, all four sides are specified with that one value.

 
<!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>margin</title>
        <style rel="stylesheet" type="text/css">
div.margin-wrapper {
    background: lightyellow;
    border: 1px solid gold;
    float: left;
    margin: 5px;
}
div.margin-wrapper div {
    background: red;
    border: 1px solid black;
    width: 25px;
    height: 25px;
}
div#margin-one {
    margin: 2px;
}
        
        </style>
    </head>
    <body>
        <div class="margin-wrapper">
            <div id="margin-one">asdf</div>
        </div>
    </body>
</html>



When three values are supplied, the top is the first, the right and left sides are the second, and the bottom is the third.

 


<!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>margin</title>
        <style rel="stylesheet" type="text/css">
div.margin-wrapper {
    background: lightyellow;
    border: 1px solid gold;
    float: left;
    margin: 5px;
}
div.margin-wrapper div {
    background: khaki;
    border: 1px solid black;
    width: 25px;
    height: 25px;
}
div#margin-three {
    margin: 2px 10px 4px;
}
        
        </style>
    </head>
    <body>
        <div class="margin-wrapper">
            <div id="margin-three">asdf</div>
        </div>
    </body>
</html>



When two values are supplied to the margin shorthand property, the top and bottom are the first, right and left sides are the second.

 

<!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>margin</title>
        <style rel="stylesheet" type="text/css">
div.margin-wrapper {
    background: lightyellow;
    border: 1px solid gold;
    float: left;
    margin: 5px;
}
div.margin-wrapper div {
    background: red;
    border: 1px solid black;
    width: 25px;
    height: 25px;
}
div#margin-two {
    margin: 2px 10px;
}
        
        </style>
    </head>
    <body>
        <div class="margin-wrapper">
            <div id="margin-two">asdf</div>
        </div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/margin&oldid=5247»