HTML/CSS/Box Model/margin right

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

Aligned center horizontally for absolute position

   <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;
 background: black;

}

  1. cm {
 position: absolute;

}

  • .centeredMargin {
 width: 200px;
 left: 0;
 margin-left: auto;
 right: 0;
 margin-right: auto;
 background: red;

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

Horizontally & Vertically Centered

</body> </html>

</source>
   
  


Aligned center vertically for absolute position

   <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;
 background: black;

}

  1. cm {
 position: absolute;

}

  • .centeredMargin {
 width: 200px;
 left: 0;
 margin-left: auto;
 right: 0;
 margin-right: auto;
 background: red;

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

Horizontally & Vertically Centered

</body> </html>

</source>
   
  


Center Aligned static

   <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. center {
 position: static;
 width: 120px;
 margin-left: auto;
 margin-right: auto;
 background: gold;

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

Center Aligned

</body> </html>

</source>
   
  


Centered body

   <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=ISO-8859-1" /> <title>Centered body</title> <style type="text/css"> body {

 background: #ccc;
 border: 1px solid black;
 padding: 20px;
 margin-left: auto;
 margin-right: auto;
 width: 20em;

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

This is the title

this is a test. this is a test.

</body> </html>

</source>
   
  


Center-middle Aligned

   <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. cm {
 position: absolute;
 width: 200px;
 left: 0;
 margin-left: auto;
 right: 0;
 margin-right: auto;
 height: 18px;
 top: 0;
 margin-top: auto;
 bottom: 0;
 margin-bottom: auto;
 background: red;

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

Center-middle Aligned

</body> </html>

</source>
   
  


Left Aligned and Offset Static Block

   <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 {
 position: static;
 width: 120px;
 margin-left: 0;
 margin-right: auto;
 background: red;

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

Left Aligned

</body> </html>

</source>
   
  


Left Aligned Sized Static Block with margin-right: 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 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;
 background-color: gold;

}

  1. sizedStaticBlock {
 position: static;
 text-align: left;
 margin-top: 5px;
 width: 400px;
 margin-left: 0;
 margin-right: auto;

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

Positioned Grandparent
Non-positioned Parent
Sized Static Block

</body> </html>

</source>
   
  


Right Aligned static

   <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 {
 position: static;
 width: 120px;
 margin-left: auto;
 margin-right: 0;
 background: yellow;

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

</body> </html>

</source>
   
  


Right-top 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. rt {
 position: absolute;
 width: 220px;
 left: auto;
 margin-left: auto;
 right: 0;
 margin-right: 8px;
 height: 18px;
 top: 0;
 margin-top: 8px;
 bottom: auto;
 margin-bottom: auto;
 background: red;

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

Right-top Aligned and Offset

</body> </html>

</source>
   
  


Set margin for four directions

   <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>margin</title>
       <style rel="stylesheet" type="text/css">

div {

   width: 100px;
   height: 100px;
   background: pink;
   border: 1px solid pink;

} div#top-rightleft-bottom {

   margin-right: 5px;

} div#top-rightleft-bottom-1 {

   margin: 15px 5px 10px;

}

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

</html>

</source>
   
  


Set margin left and right to 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h1, h2, h3 {

margin-left: auto;
margin-right: auto;

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

Lorem ipsum dolor sit amet

Nulla cursus semper metus

this is a text.

</body> </html>

</source>
   
  


Sized Absolute right aligned

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

}

  • .example {
 padding: 5px;
 border: 5px solid black;

}

  1. myAbsolute {
 position: absolute;
 text-align: right;
 top: 0;
 margin-top: 155px;
 width: 400px;
 left: auto;
 margin-left: auto;
 right: 0;
 margin-right: 0;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
   Sized Absolute 

</body> </html>

</source>
   
  


Sized Relative block

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

}

  • .example {
 padding: 5px;
 border: 5px solid black;

}

  1. myAbsolute {
 position: relative;
 text-align: right;
 top: 0;
 margin-top: 155px;
 width: 400px;
 left: auto;
 margin-left: auto;
 right: 0;
 margin-right: 0;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
   Sized Relative 

</body> </html>

</source>
   
  


Sized Static Block right aligned

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

}

  • .example {
 padding: 5px;
 border: 5px solid black;

}

  1. sizedStaticBlock {
 position: static;
 text-align: right;
 margin-top: 5px;
 width: 400px;
 margin-left: auto;
 margin-right: 0;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
Sized Static Block

</body> </html>

</source>
   
  


Stretched Absolute right 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;

}

  • .extraStyle {
 padding: 5px;
 border: 5px solid black;

} div.extraStyle span {

 margin-right: -60px;
 border: 1px dotted black;

} span.extraStyle span {

 margin-right: 30px;
 border: none;
 background-color: gold;

}

  1. sa {
 position: absolute;
 text-align: right;
 top: 0;
 margin-top: 245px;
 width: auto;
 left: 0;
 margin-left: 0;
 right: 0;
 margin-right: -50px;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
   -50px

</body> </html>

</source>
   
  


Stretched Static Block right aligned

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

}

  • .example {
 padding: 5px;
 border: 5px solid black;

}

  1. myStyle {
 position: static;
 text-align: right;
 margin-top: 5px;
 width: auto;
 margin-left: 0;
 margin-right: 0;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
Stretched Static Block

</body> </html>

</source>