HTML/CSS/CSS Attributes and Javascript Style Properties/margin left — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 08:16, 26 мая 2010
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>