HTML/CSS/Box Model/margin bottom

Материал из Web эксперт
Версия от 11:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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

}

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

Horizontally & Vertically Centered

</body> </html>

</source>
   
  


Left-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. 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 and Offset

</body> </html>

</source>
   
  


margin-bottom: 2em

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

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</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">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html>

</source>
   
  


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

Right-bottom Aligned & Offset

</body> </html>

</source>
   
  


Set margin for hr

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


This is a text


</body> </html>

</source>
   
  


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

   <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.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>
asdf
   </body>

</html>

</source>
   
  


Static Block Bottom Aligned with margin-bottom: 0

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

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

}

  1. sizedStaticBlock {
 height: 100px;
 margin-top: auto;
 margin-bottom: 0;
 position: static;
 margin-left: 0px;
 background: gold;

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

Positioned Grandparent
Non-positioned Parent
Sized Static Block

</body> </html>

</source>
   
  


Top Aligned 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 {
 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;

}

  1. sizedStaticBlock {
 height: 100px;
 margin-top: 0;
 margin-bottom: auto;
 position: static;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
Sized Static Block

</body> </html>

</source>
   
  


Top and bottom margins set 5% for me

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

} h2 {

 background-color: #c0c0c0; 
 margin-left: 5%; 
 margin-top: 5%;
 margin-bottom: 5%;
 padding-left: 1em;

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

Top and bottom margins set 5% for me

</body> </html>

</source>