HTML/CSS/CSS Attributes and Javascript Style Properties/margin

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

li margin:25em 0 and padding

   <source lang="html4strict">


<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul { 

 list-style-type: disc;

} li { 

 padding: 0;
 margin: 0 0 0.25em 0;

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

Heading 3

Text:

  • ONE
  • TWO
  • THREE
  • FOUR
  • FIVE

</body> </html> 

</source>


margin: 2em

   <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 {
           padding: 2em;
           margin: 2em;
           border: thin solid black;
           width: 10em;
           margin: auto;
       }
           </style>
       </head>
       <body>

p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p

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


margin: auto

   <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 {
           padding: 2em;
           margin: 2em;
           border: thin solid black;
           width: 10em;
           margin: auto;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

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


"margin" Example

   <source lang="html4strict">

<html> <body> <img id="myImg" 

    src="http://www.wbex.ru/style/logo.png" 
    height="100" 
    width="100" 
    border="1">

<button onclick="myImg.style.margin="25 25 25 25"">25 Px Margin</button> <button onclick="myImg.style.margin="0 0 0 0"">0 Margin</button> </body> </html> 


     </source>


Margin with four values

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

   background: yellow;
   border: 1px solid #fff;
   margin: -1px;
   width: 122px;

} div.margin { 

   width: 100px;
   height: 100px;
   background: pink;
   border: 1px solid pink;

} div#top-right-bottom-left { 

   margin-top: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   margin-left: 10px;

} div#top-right-bottom-left-1 { 

   margin: 10px 10px 10px 10px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Margin with three values

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

   background: yellow;
   border: 1px solid #fff;
   margin: -1px;
   width: 112px;

} div.margin { 

   width: 100px;
   height: 100px;
   background: pink;
   border: 1px solid pink;

} div#top-rightleft-bottom { 

   margin-top: 15px;
   margin-right: 5px;
   margin-bottom: 10px;
   margin-left: 5px;

} div#top-rightleft-bottom-1 { 

   margin: 15px 5px 10px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Margin with two values

   <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: mistyrose;
   border: 1px solid pink;

} div#topbottom-rightleft-1 { 

   margin: 15px 5px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

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