HTML/CSS/Box Model/margin right

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

Aligned center horizontally for absolute position

 
<!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;
}
#cm {
  position: absolute;
}
* .centeredMargin {
  width: 200px;
  left: 0;
  margin-left: auto;
  right: 0;
  margin-right: auto;
  background: red;
}
</style>
</head>
<body>
<div> 
<p id="cm" class="centeredMargin">Horizontally &amp; Vertically Centered</p> 
</div>
</body>
</html>



Aligned center vertically for absolute position

 
<!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;
}
#cm {
  position: absolute;
}
* .centeredMargin {
  width: 200px;
  left: 0;
  margin-left: auto;
  right: 0;
  margin-right: auto;
  background: red;
}
</style>
</head>
<body>
<div> 
<p id="cm" class="centeredMargin">Horizontally &amp; Vertically Centered</p> 
</div>
</body>
</html>



Center Aligned static

 
<!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;
}
#center {
  position: static;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  background: gold;
}
</style>
</head>
<body>
    <div class="grandContainer"> 
    <p id="center">Center Aligned</p> 
    </div> 
</body>
</html>



Centered body

 
<!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>
<h1>This is the title</h1>
<p>this is a test. this is a test. </p>
</body>
</html>



Center-middle Aligned

 

<!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;
}
#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>
<div> 
  <p id="cm">Center-middle Aligned</p> 
</div> 

</body>
</html>



Left Aligned and Offset Static Block

 
<!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 {
  position: static;
  width: 120px;
  margin-left: 0;
  margin-right: auto;
  background: red;
}
</style>
</head>
<body>
    <div class="grandContainer"> 
        <p id="left">Left Aligned</p> 
    </div> 
</body>
</html>



Left Aligned Sized Static Block with margin-right: auto

 
<!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;
}
#sizedStaticBlock {
  position: static;
  text-align: left;
  margin-top: 5px;
  width: 400px;
  margin-left: 0;
  margin-right: auto;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
      <div id="sizedStaticBlock" class="common">Sized Static Block </div> 
  </div>
</div> 
</body>
</html>



Right Aligned static

 
<!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 {
  position: static;
  width: 120px;
  margin-left: auto;
  margin-right: 0;
  background: yellow;
}
</style>
</head>
<body>
    <div class="grandContainer"> 
        <p id="right">Right Aligned</p> 
    </div> 
</body>
</html>



Right-top 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;
}
#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>
<div> 
  <p id="rt">Right-top Aligned and Offset</p> 
</div> 

</body>
</html>



Set margin for four directions

 

<!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>
        <div id="top-rightleft-bottom"></div>
        <div id="top-rightleft-bottom-1"></div>
    </body>
</html>



Set margin left and right to auto

 
<!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>
  <h2 id="warning">Lorem ipsum dolor sit amet</h2> 
  <h2 id="questions">Nulla cursus semper metus</h2> 
  <p>this is a text.</p>

</body>
</html>



Sized Absolute right aligned

 
<!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;
}
#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>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myAbsolute" class="example">Sized Absolute</span> 
  </div>
</div> 
</body>
</html>



Sized Relative block

 
<!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;
}
#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>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myAbsolute" class="example">Sized Relative</span> 
  </div>
</div> 
</body>
</html>



Sized Static Block right aligned

 
<!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;
}
#sizedStaticBlock {
  position: static;
  text-align: right;
  margin-top: 5px;
  width: 400px;
  margin-left: auto;
  margin-right: 0;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <div id="sizedStaticBlock" class="example">Sized Static Block </div> 
  </div>
</div> 
</body>
</html>



Stretched Absolute right 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;
}
* .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;
}
#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>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="sa" class="extraStyle"><span>-50px</span></span>
  </div>
</div> 
</body>
</html>



Stretched Static Block right aligned

 
<!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;
}
#myStyle {
  position: static;
  text-align: right;
  margin-top: 5px;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  background-color: gold;
}</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <div id="myStyle" class="example">Stretched Static Block</div> 
  </div>
</div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/margin_right&oldid=5275»