HTML/CSS/Box Model/margin bottom

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

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



Left-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;
}
#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 and Offset</p> 
</div> 

</body>
</html>



margin-bottom: 2em

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

div#content{
  margin-left: 27%;
  margin-bottom: 2em;
}
  
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
  <div id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>



Right-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;
}
#rb {
  position: absolute;
  width: auto;
  left: auto;
  margin-left: auto;
  right: 0;
  margin-right: 8px;
  height: auto;
  top: auto;
  margin-top: auto;
  bottom: 0;
  margin-bottom: 8px;
  background: red;
}
</style>
</head>
<body>
<div> 
  <p id="rb">Right-bottom Aligned &amp; Offset</p> 
</div> 

</body>
</html>



Set margin for hr

 
<!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">
hr {
 margin-left: auto;
 margin-right: auto;
 margin-top: 1.25em;
 margin-bottom: 1.25em;
 width: 10px;
 height: 10px;
 background-color: #777;
}
</style>
</head>
<body>
<hr/>
  <p>This is a text</p>
  
  
</body>
</html>



specify margin via one of the four separate margin properties: margin-top, margin-right, margin-bottom, and margin-left.

 


<!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-properties {
    margin-top: 2px;
    margin-right: 4px;
    margin-bottom: 6px;
    margin-left: 8px;
}
        
        </style>
    </head>
    <body>
        <div class="margin-wrapper">
            <div id="margin-properties">asdf</div>
        </div>
    </body>
</html>



Static Block Bottom Aligned with margin-bottom: 0

 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  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;
  background-color: gold;
  width: 120px;
  text-align: center;
  position: relative;
}
* .extraStyle span {
  height: auto;
  left: 0;
  width: 130px;
}
span.extraStyle span {
  position: absolute;
  top: auto;
  margin-top: auto;
  bottom: 0;
  margin-bottom: 0;
}
#sizedStaticBlock {
  height: 100px;
  margin-top: auto;
  margin-bottom: 0;
  position: static;
  margin-left: 0px;
  background: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
        <div id="sizedStaticBlock" class="extraStyle"><span>Sized Static Block</span></div> 
    </div>
</div> 
</body>
</html>



Top Aligned 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 {
  position: relative;
  height: 300px;
  width: 700px;
  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;
  width: 120px;
  text-align: center;
  position: relative;
}
* .extraStyle span {
  left: 0;
  width: 130px;
  height: auto;
}
#sizedStaticBlock {
  height: 100px;
  margin-top: 0;
  margin-bottom: auto;
  position: static;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <div id="sizedStaticBlock" class="extraStyle"><span>Sized Static Block</span></div> 
    </div>
  </div> 
</body>
</html>



Top and bottom margins set 5% for me

 
<!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;
}
h2 {
  background-color: #c0c0c0; 
  margin-left: 5%; 
  margin-top: 5%;
  margin-bottom: 5%;
  padding-left: 1em;
}
</style> </head>
<body>
     <h2>Top and bottom margins set 5% for me</h2>
   
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/margin_bottom&oldid=5309»