HTML/CSS/Box Model/margin left

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

Aligned and Offset Absolute

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

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

}

  1. 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>

Left-top Aligned & Offset

</body> </html>

</source>
   
  


Aligned Outside with large negative margin value

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

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

Parent

Sized Block Outside Left

</body> </html>

</source>
   
  


A paragraph with a margin-left set at 20%

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

A paragraph with a margin-left set at 20%.

</body> </html>

</source>
   
  


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

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

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html>

</source>
   
  


Left aligned and offset

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

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

}

  1. left-off {
 position: static;
 width: 200px;
 margin-left: 50px;
 margin-right: auto;
 background: pink;

} </style> </head> <body>

Left Aligned & Offset

</body> </html>

</source>
   
  


Left-bottom Aligned and Offset

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

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

}

  1. 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>

Left-bottom Aligned and Offset

</body> </html>

</source>
   
  


LI margin-left: 10%

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

  • Item one
  • Paragraph item

</body> </html>

</source>
   
  


margin can be positive or negative.

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

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html>

</source>
   
  


margin-left: auto

   <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">
       p {
           padding: 2em;
           margin: 2em;
           border: thin solid black;
           width: 10em;
           margin-left: auto;
       }
           </style>
       </head>
       <body>

This is a test. This is a test.

       </body>
   </html>
</source>
   
  


margin-left setting for UL

   <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>
     <style type = "text/css">
        ul       { margin-left: 75px }
     </style>
  </head>
  <body>

Shopping list for Monday:

  • M
  • B
    • W
    • R
    • W
  • R
  • P
  • Pthis is a test.

<a class = "nodec" href = "http://www.wbex.ru"> this is a test. </a>

  </body>

</html>

</source>
   
  


Right aligned and offset

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

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

}

  1. right-off {
 position: static;
 width: 200px;
 margin-left: auto;
 margin-right: 50px;
 background: blue;
 color: white;

}

</style> </head> <body>

Right Aligned & Offset

</body> </html>

</source>
   
  


Set margin-left and margin-right

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

The heading for this page

normal class.

large class.

medium class

</body> </html>

</source>
   
  


Shrinkwrapped Absolute left offset

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

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

}

  1. 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>

Positioned Grandparent
Non-positioned Parent
   Shrinkwrapped Absolute: -50px 

</body> </html>

</source>
   
  


Sized Absolute left offset

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

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

}

  1. 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>

Positioned Grandparent
Non-positioned Parent
   Sized Absolute: -50px 

</body> </html>

</source>
   
  


Static Block centered offset

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

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

}

  1. ss {
 position: static;
 text-align: center;
 margin-top: 5px;
 width: auto;
 margin-left: 90px;
 margin-right: 10px;
 background-color: gold;

} </style> </head> <body>

Positioned Grandparent
Non-positioned Parent
Stretched Static Block: 40px

</body> </html>

</source>
   
  


Stretched Absolute left offset

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

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

}

  1. 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>

Positioned Grandparent
Non-positioned Parent
   Stretched Absolute:-50px

</body> </html>

</source>
   
  


three pixel offset by margin

   <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: 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>
               Float text.

Paragraph text. Paragraph text. Paragraph text.

   </body>

</html>

</source>