HTML/CSS/Box Model/margin left

Содержание

1 Aligned and Offset Absolute
2 Aligned Outside with large negative margin value
3 A paragraph with a margin-left set at 20%
4 A percentage margin refers to a percentage of the containing block"s width.
5 Left aligned and offset
6 Left-bottom Aligned and Offset
7 LI margin-left: 10%
8 margin can be positive or negative.
9 margin-left: auto
10 margin-left setting for UL
11 Right aligned and offset
12 Set margin-left and margin-right
13 Shrinkwrapped Absolute left offset
14 Sized Absolute left offset
15 Static Block centered offset
16 Stretched Absolute left offset
17 three pixel offset by margin

Aligned and Offset Absolute

 
<!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" title="text/css">
div {
  position: relative;
  width: 600px;
  height: 600px;
  background: black;
}
#lt {
  position: absolute;
  width: auto;
  left: 0;
  margin-left: 8px;
  right: auto;
  margin-right: auto;
  height: auto;
  top: 0;
  margin-top: 8px;
  bottom: auto;
  margin-bottom: auto;
  background: red;
}
</style>
</head>
<body>
<div> 
  <p id="lt">Left-top Aligned &amp; Offset</p> 
</div> 

</body>
</html>

Aligned Outside with large negative margin 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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .parent {
    left: 300px;
    top: 300px;
  position: relative;
  height: 140px;
  width: 200px;
  background: black;
}
* .negativeMargin {
  width: 220px;
  margin-left: -234px;
  background: red;
}
</style>
</head>
<body>
<div class="parent">Parent 
  <p class="negativeMargin">Sized Block Outside Left</p> 
</div> 
</body>
</html>

A paragraph with a margin-left set at 20%

 

<!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>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
body {
  background-color: #808080;
}
p {
  background-color: #c0c0c0;
  margin-left: 20%;
  padding-left: 10%;
}
</style> 
</head>
<body>
   <p>A paragraph with a margin-left set at 20%.</p>
</body>
</html>

A percentage margin refers to a percentage of the containing block"s width.

 

<!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;
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    position: absolute;
    margin-left: 10%;
    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>

Left aligned and offset

 

<!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" title="text/css">
.grandContainer{
   width: 600px;
   height: 600px;
   background: black;
}
#left-off {
  position: static;
  width: 200px;
  margin-left: 50px;
  margin-right: auto;
  background: pink;
}
</style>
</head>
<body>
    <div class="grandContainer"> 
        <p id="left-off">Left Aligned &amp; Offset</p> 
    </div> 
</body>
</html>

Left-bottom Aligned and Offset

 
<!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" title="text/css">
div {
  position: relative;
  width: 600px;
  height: 600px;
  background: black;
}
#lb {
  position: absolute;
  width: 240px;
  left: 0;
  margin-left: 8px;
  right: auto;
  margin-right: auto;
  height: 18px;
  top: auto;
  margin-top: auto;
  bottom: 0;
  margin-bottom: 8px;
  background: red;
}
</style>
</head>
<body>
<div> 
  <p id="lb">Left-bottom Aligned and Offset</p> 
</div> 

</body>
</html>

LI margin-left: 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">
<head>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
body {
  background-color: #808080;
}
li {
  background-color: #ffffff;
}
li p {
  margin-left: 10%;
}
</style> 
</head>
<body>
   
<ul>
<li>Item one</li>
<li><p>Paragraph item</p></li>
</ul>
</body>
</html>

margin can be positive or negative.

 

<!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;
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    position: absolute;
    margin-left: -100px;
    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>

margin-left: auto

 
<!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 {
            padding: 2em;
            margin: 2em;
            border: thin solid black;
            width: 10em;
            margin-left: auto;
        }
            </style>
        </head>
        <body>
      <p>
          This is a test. This is a test. 
      </p>
        </body>
    </html>

margin-left setting for UL

 
<?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>
      <style type = "text/css">
         ul       { margin-left: 75px }
      </style>
   </head>
   <body>
      <h1>Shopping list for <em>Monday</em>:</h1>
      <ul>
         <li>M</li>
         <li>B
            <ul>
               <li>W</li>
               <li>R</li>
               <li>W</li>
            </ul>
         </li>
         <li>R</li>
         <li>P</li>
         <li>P<em>this is a test. </em></li>
      </ul>
      <p><a class = "nodec" href = "http://www.wbex.ru">
      this is a test. </a></p>
   </body>
</html>

Right aligned and offset

 

<!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" title="text/css">
.grandContainer{
   width: 600px;
   height: 600px;
   background: black;
}
#right-off {
  position: static;
  width: 200px;
  margin-left: auto;
  margin-right: 50px;
  background: blue;
  color: white;
}

</style>
</head>
<body>
    <div class="grandContainer"> 
       <p id="right-off">Right Aligned &amp; Offset</p> 
    </div> 
</body>
</html>

Set margin-left and margin-right

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

Shrinkwrapped Absolute left offset

 
<!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" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
}
* .rumon {
  padding: 5px;
  border: 5px solid black;
}
div.rumon span {
  margin-left: -60px;
  border: 1px dotted black;
}
span.rumon span {
  margin-left: 30px;
  border: none;
}
#wa {
  position: absolute;
  text-align: left;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: 0;
  margin-left: -50px;
  right: auto;
  margin-right: auto;
  background-color: pink;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="wa" class="common"><span>Shrinkwrapped Absolute: -50px</span></span> 
  </div>
</div> 
</body>
</html>

Sized Absolute left offset

 
<!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" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
}
* .rumon {
  padding: 5px;
  border: 5px solid black;
}
div.rumon span {
  margin-left: -60px;
  border: 1px dotted black;
}
span.rumon span {
  margin-left: 30px;
  border: none;
}
#myAbsolute {
  position: absolute;
  text-align: left;
  top: 0;
  margin-top: 155px;
  width: 400px;
  left: 0;
  margin-left: -50px;
  right: auto;
  margin-right: auto;
  background-color: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myAbsolute" class="common"><span>Sized Absolute: -50px</span></span> 
  </div>
</div> 
</body>
</html>

Static Block centered offset

 

<!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" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .ex {
  padding: 5px;
  border: 5px solid black;
}
* .ex span {
  margin-left: -40px;
}
#ss {
  position: static;
  text-align: center;
  margin-top: 5px;
  width: auto;
  margin-left: 90px;
  margin-right: 10px;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <div id="ss" class="ex"><span>Stretched Static Block: 40px</span></div> 
  </div>
</div> 
</body>
</html>

Stretched Absolute left offset

 

<!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" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
}
* .rumon {
  padding: 5px;
  border: 5px solid black;
}
div.rumon span {
  margin-left: -60px;
  border: 1px dotted black;
}
span.rumon span {
  margin-left: 30px;
  border: none;
}
#sa {
  position: absolute;
  text-align: left;
  top: 0;
  margin-top: 245px;
  width: auto;
  left: 0;
  margin-left: -50px;
  right: 0;
  margin-right: 0;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="sa" class="common"><span>Stretched Absolute:-50px</span></span>
  </div>
</div> 
</body>
</html>

three pixel offset by 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: red;
                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. 
            </p>
        </div>
    </body>
</html>

HTML/CSS/Box Model/margin left

Содержание

Aligned and Offset Absolute

Aligned Outside with large negative margin value

A paragraph with a margin-left set at 20%

A percentage margin refers to a percentage of the containing block"s width.

Left aligned and offset

Left-bottom Aligned and Offset

LI margin-left: 10%

margin can be positive or negative.

margin-left: auto

margin-left setting for UL

Right aligned and offset

Set margin-left and margin-right

Shrinkwrapped Absolute left offset

Sized Absolute left offset

Static Block centered offset

Stretched Absolute left offset

three pixel offset by margin

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты