HTML/CSS/Box Model/margin

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

Содержание

Add margin to offset block nearby

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">

body { 

 margin: 0px;
 padding: 0px;
 color: #000;
 background-color: #ccc;

}

  1. content {
 padding: 10px 2% 10px 2%;
 margin: 5px 26% 5px 2%;
 background-color: #fff;
 border: 1px solid #000;

}

  1. menu {
 position: absolute;
 top: 0px;
 right: 0px;
 padding: 10px 2% 10px 2%;
 margin: 5px 2% 5px 1%;
 background-color: #fff;
 border: 1px solid #000;
 width: 18%;

} 

 </style>

</head> <body> 

 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test.

</body>

</html> 

</source>


A margin negative value moves it away from center.

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

}

  • .box {
 position: absolute;
 overflow: auto;
 visibility: visible;
 z-index: 1;
 bottom: 20px;
 margin: -30px;
 padding: 10px;
 background: red;

}

  • .before {
   z-index: 2;
 width: 100px;
 height: 400px;
 left: 400px;
 right: auto;
 top: 100px;
 bottom: auto;
   background: yellow;

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

BEFORE
ABSOLUTE BEFORE
this is a test. this is a test.

</body> </html> 

</source>


Body margin to 10%

   <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" lang="en"> 

   <head>
       <title></title>

<style type="text/css"> body { 

 margin: 10%;

} </style> 

   </head>
   <body>

header 2

header 3

This is a text.

   </body>

</html> 

</source>


Body with 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"> body { 

margin: 5% 10% 0 10%;

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

header 2

</body> </html> 

</source>


Define Margin with value and percent

   <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"> p.normal { 

padding: 0;
margin-left: 0;
margin-right: 0;

} p.large { 

margin-left: 33%;
margin-right: 5%;

} p.medium { 

margin-left: 15%;
margin-right: 33%;

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

The heading for this page

normal class.

large class.

medium class

</body> </html> 

</source>


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

   <head>
       <title></title>
       <style type="text/css">
           div#container {
               margin: 0 20px;
               background: lightyellow;
               width: 300px;
           }
           div#float {
               margin-left: 50px;
               background: lightgrey;
               float: left;
               border: 1px solid black;
               width: 75px;
               height: 50px;
           }
       </style>
   </head>
   <body>

               Float text.

   </body>

</html> 

</source>


double margin fixed

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           div#container {
               margin: 0 20px;
               background: red;
               width: 300px;
               height: 500px;
           }
           div#float {
               margin-left: 50px;
               background: lightgrey;
               float: left;
               border: 1px solid black;
               width: 75px;
               height: 50px;
               display: inline;
           }
       </style>
   </head>
   <body>

               Float text.

   </body>

</html> 

</source>


LI margin: 0.33em 0.5em 0.5em 1.5em

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

width: 30%;
padding: 0 0 0.75em 0; 
margin: 0;

} li { 

text-indent: -0.75em; 
margin: 0.33em 0.5em 0.5em 1.5em;

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

Table of Contents

As proposed, the contents of the paper will contain the following sections:

  • Database
  • Privacy
  • Best
  • Automation?
  • Smart Choice

let <a href="n@h.ru">Nicholas</a> know about it.

</body> </html> 

</source>


margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement.

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

background-image: url(http://www.wbex.ru/style/logo.png);
background-repeat: no-repeat;
background-position: bottom;
margin: 10px 0 0 0;
padding: 0.5em 0 60px 0;
width: 600;
height: 600;

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

This is a header this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

This is a text.

</body> </html> 

</source>


margin: 1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).

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

  height: 150px;
  width: 150px;
  padding: 10px;
  margin: 1em;

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

  • A
  • B
  • C

</body> </html> 

</source>


Margin between parent and children

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

body { 

   margin: 0;
   padding: 0;

} div { 

   width: 100px;
   height: 100px;

} div#parent { 

   margin: 10px 20px;
   background: yellow;
   border: 1px solid gold;

} div#child { 

   margin: 20px;
   background: lightyellow;
   border: 1px solid gold;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Margin between sibling

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

body { 

   margin: 0;
   padding: 0;

} div { 

   width: 100px;
   height: 100px;
   background: lightyellow;
   border: 1px solid gold;

} div#top { 

   margin: 10px 20px;

} div#bottom { 

   margin: 20px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


margin collapse

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               p {
                   margin: 20px;
                   padding: 20px;
                   border: thin solid black;
                   background: #ccc;
               }
           </style>
       </head>
       <body>

This is the first paragraph.

This is the second paragraph. 

       </body>
   </html>
</source>


margin collapse nested elements

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               div {
                   margin: 20px;
                   background: pink;
               }
               p {
                   margin: 20px;
                   padding: 20px;
                   background: yellow;
               }
           </style>
       </head>
       <body>

No margins

       </body>
   </html>
</source>


margin collapse nested elements default padding

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               div {
                   margin: 20px;
                   padding: 20px;
                   background: pink;
               }
               p {
                   padding: 20px;
                   background: red;
               }
           </style>
       </head>
       <body>

No margins, ey?

       </body>
   </html>
</source>


margin collapse nested elements padding

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               div {
                   margin: 20px;
                   padding: 20px;
                   background: red;
               }
               p {
                   margin: 0;
                   padding: 20px;
                   background: pink;
               }
           </style>
       </head>
       <body>

No margins

       </body>
   </html>
</source>


margin collapse with nested elements

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               div {
                   margin: 20px;
                   background: #ccc;
               }
               p {
                   margin: 20px;
                   padding: 20px;
                   background: #ddd;
               }
           </style>
       </head>
       <body>

No margins

       </body>
   </html>
</source>


Margin Collapsing

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

 color: #353535;
 padding: 1em;

} h1 { 

 font-size: 2.4em;
 font-weight: normal;

}

.wrapper { 

 width: 420px;
 border: 1px solid gray;
 margin: 20px;

}

  1. box1 {
 margin: 10px;
 background-color:#d5d5d5;

}

  1. box2 {
 margin: 10px;
 background-color:#d5d5d5;
 padding: 1px;

} p { 

 margin: 20px;
 background-color:#90C2F3;

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

This paragraph has a 20px margin.

This paragraph has a 20px margin.

</body> </html> 

</source>


Margin collapsing also happens between parent and child elements.

   <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#parent { 

   margin: 5px;
   border: none;
   background: crimson;

} div#child { 

   margin: 5px;

} 

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

</html> 

</source>


Margin collapsing with adjacent siblings.

   <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#top { 

   margin: 5px;

} div#bottom { 

   margin: 5px;

} 

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

</html> 

</source>


margin sets the size of the margin surrounding the border.

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

  • .box {
 display: static;
 overflow: visible;
 visibility: visible;
 width: 160px;
 height: 150px;
 padding: 30px;
 margin-left: 230px;
 margin-top: 80px;
 background-color: #ccc;

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

Box Model

</body> </html> 

</source>


Set margin to 0

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

margin: 0;

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

This is the title

This is a text.

</body> </html> 

</source>


Set margin to5em 0"

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

text-indent: 2.5em;
margin: 0 0 0.5em 0;
padding: 0;

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

The heading for this page

This is a text.

This is a text.

</body> </html> 

</source>


Use margin to align block to center

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>margin</title>
       <style rel="stylesheet" type="text/css">

body { 

   margin: 10px;
   padding: 0;

} div { 

   width: 50px;
   height: 50px;
   background: rgb(218, 220, 243);
   border: 1px solid rgb(154, 157, 203);

} div#center { 

   margin: 10px auto;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Use margin to align block to left

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>margin</title>
       <style rel="stylesheet" type="text/css">

body { 

   margin: 10px;
   padding: 0;

} div { 

   width: 50px;
   height: 50px;
   background: rgb(218, 220, 243);
   border: 1px solid rgb(154, 157, 203);

} div#left { 

   margin: 10px auto 10px 0;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Use margin to align block to right

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>margin</title>
       <style rel="stylesheet" type="text/css">

body { 

   margin: 10px;
   padding: 0;

} div { 

   width: 50px;
   height: 50px;
   background: rgb(218, 220, 243);
   border: 1px solid rgb(154, 157, 203);

} div#right { 

   margin: 10px 0 10px auto;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Use margin to offset child

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

body { 

   margin: 0;
   padding: 0;

} div { 

   width: 100px;
   height: 100px;

} div#parent { 

   margin: 10px 20px;
   background: yellow;

} div#child { 

   margin: 20px;
   background: lightyellow;
   border: 1px solid gold;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


When all four values are provided, each is provided in order clockwise, beginning with the top property.

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

   margin: 4px 6px 8px 10px;

} 

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

</html> 

</source>


When one value is supplied to the margin shorthand property, all four sides are specified with that one 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" 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: red;
   border: 1px solid black;
   width: 25px;
   height: 25px;

} div#margin-one { 

   margin: 2px;

} 

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

</html> 

</source>


When three values are supplied, the top is the first, the right and left sides are the second, and the bottom is the third.

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

   margin: 2px 10px 4px;

} 

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

</html> 

</source>


When two values are supplied to the margin shorthand property, the top and bottom are the first, right and left sides are the second.

   <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: red;
   border: 1px solid black;
   width: 25px;
   height: 25px;

} div#margin-two { 

   margin: 2px 10px;

} 

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

</html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/margin&oldid=5247»