HTML/CSS/Box Model/margin top

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

A paragraph with top and bottom margins set at 5%

   <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: #808;

} p {

 background: #c0c; 
 margin-left: 20%; 
 padding-left: 10%;
 margin-top: 5%;
 margin-bottom: 5%;

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

A paragraph with top and bottom margins set at 5%

</body> </html>

</source>
   
  


Independently set margin-left, margin-right, margin-top, and margin-bottom.

   <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: 200px;
   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>
   
  


Layered with negative top 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

  • .static {
 position: static;
 background: red;

}

  • .overlap {
 margin-top: -22px;
 background: yellow;

}

  • .relative {
 position: relative;
 background: pink;

}

  • .fixed {
 position: fixed;
 margin-top: -16px;
 background: gold;

}

  • .absolute {
 position: absolute;
 top: 65px;
 background: blue;

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

Layered

Static Overlapping Block

Static Overlapping Block

Overlapping Table

</body> </html>

</source>
   
  


margin-top: .33em

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

 margin-top: .33em;
 display: block;

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

Contact Form

This is a test.

Please fill out our form below in order to contact me.

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

Note: Due to our busy schedules, we cannot answer every message.

header

This is a text

</body> </html>

</source>
   
  


Set image margin top and left to negative 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> <title></title> <style type="text/css"> img {

position: absolute;
top: 50%;
left: 50%;
margin-top: -96px;
margin-left: -138px;
height: 192px;
width: 256px;

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

 <img src="w.jpg" width="256" height="192" alt="Photo">
 

</body> </html>

</source>
   
  


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

}

  • .ex {
 padding: 5px;
 border: 5px solid black;
 width: 120px;
 text-align: center;
 position: relative;

}

  • .ex span {
 left: 0;
 width: 130px;
 height: auto;

}

  1. myAbsolute {
 height: 100px;
 top: 0;
 margin-top: 0;
 bottom: auto;
 margin-bottom: auto;
 position: absolute;
 margin-left: 200px;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
     Sized Absolute 

</body> </html>

</source>
   
  


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

}

  • .innerClass {
 padding: 5px;
 border: 5px solid black;
 width: 120px;
 text-align: center;
 position: relative;

}

  • .innerClass span {
 left: 0;
 width: 130px;
 height: auto;

}

  1. myStyle {
 height: auto;
 margin-top: -70px;
 margin-bottom: 0;
 position: static;
 background-color: yellow;
 background-color: gold;

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

Positioned Grandparent
Non-positioned Parent
this is a test. this is a test.

</body> </html>

</source>