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

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

margin-left: 10px

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>A demonstration of the margin property</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
p {
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}
strong {
  margin-left: 40px;
  margin-right: 10px;
  background-color: #d6d6d6;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer <strong>A</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis <strong>nostrud</strong> exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer <strong>A</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis <strong>nostrud</strong> exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer <strong>A</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis <strong>nostrud</strong> exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</body>
</html>



margin-left: 25%

 

<html>
<head>
<title>Percentages Demo</title>
<style type="text/css">
p {text-indent: -5%;
           margin-left: 25%;
           margin-right: 15%;
           font-size: 150%;
</style>
</head>
<body>
<p>This paragraph"s font and margins have been set with percentages.
The indent was set with a negative percentage.</p>
</body>
</html>



margin-left: auto

 
<!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-left: auto;
        }
            </style>
        </head>
        <body>
      <p>
          P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
          P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
          P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
          P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
      </p>
        </body>
    </html>



"margin-left" Example

    
<html>
<body>
<p>The following image has a left margin of 3mm.</p>
<img src="http://www.wbex.ru/style/logo.png" 
     height="50" 
     width="50" 
     style="margin-left="3mm"">
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/margin_left&oldid=4931»