HTML/CSS/Box Model/margin left — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 11:16, 26 мая 2010
Содержание
- 1 Aligned and Offset Absolute
- 2 Aligned Outside with large negative margin value
- 3 A paragraph with a margin-left set at 20%
- 4 A percentage margin refers to a percentage of the containing block"s width.
- 5 Left aligned and offset
- 6 Left-bottom Aligned and Offset
- 7 LI margin-left: 10%
- 8 margin can be positive or negative.
- 9 margin-left: auto
- 10 margin-left setting for UL
- 11 Shopping list for Monday:
- 12 The heading for this page
Aligned and Offset Absolute
<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"> div {
position: relative; width: 600px; height: 600px; background: black;
}
- lt {
position: absolute; width: auto; left: 0; margin-left: 8px; right: auto; margin-right: auto; height: auto; top: 0; margin-top: 8px; bottom: auto; margin-bottom: auto; background: red;
} </style> </head> <body>
Left-top Aligned & Offset
</body> </html>
</source>
Aligned Outside with large negative margin 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" title="text/css">
- .parent {
left: 300px; top: 300px; position: relative; height: 140px; width: 200px; background: black;
}
- .negativeMargin {
width: 220px; margin-left: -234px; background: red;
} </style> </head> <body>
Sized Block Outside Left
</body> </html>
</source>
A paragraph with a margin-left set at 20%
<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: #808080;
} p {
background-color: #c0c0c0; margin-left: 20%; padding-left: 10%;
} </style> </head> <body>
A paragraph with a margin-left set at 20%.
</body> </html>
</source>
A percentage margin refers to a percentage of the containing block"s width.
<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: 10%; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
Left aligned and offset
<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{
width: 600px; height: 600px; background: black;
}
- left-off {
position: static; width: 200px; margin-left: 50px; margin-right: auto; background: pink;
} </style> </head> <body>
Left Aligned & Offset
</body> </html>
</source>
Left-bottom Aligned and Offset
<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"> div {
position: relative; width: 600px; height: 600px; background: black;
}
- lb {
position: absolute; width: 240px; left: 0; margin-left: 8px; right: auto; margin-right: auto; height: 18px; top: auto; margin-top: auto; bottom: 0; margin-bottom: 8px; background: red;
} </style> </head> <body>
Left-bottom Aligned and Offset
</body> </html>
</source>
LI margin-left: 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"> <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: #808080;
} li {
background-color: #ffffff;
} li p {
margin-left: 10%;
} </style> </head> <body>
- Item one
Paragraph item
</body> </html>
</source>
margin can be positive or negative.
<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: -100px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
margin-left: 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-left: auto; } </style> </head> <body>
This is a test. This is a test.
</body> </html> </source>
margin-left setting for UL
<source lang="html4strict">
<?xml version = "1.0"?> <!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> <style type = "text/css"> ul { margin-left: 75px } </style> </head> <body>
Shopping list for Monday:
- M
- B
- W
- R
- W
- R
- P
- Pthis is a test.
<a class = "nodec" href = "http://www.wbex.ru"> this is a test. </a>
</body>
</html>
</source>
Right aligned and offset
<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{
width: 600px; height: 600px; background: black;
}
- right-off {
position: static; width: 200px; margin-left: auto; margin-right: 50px; background: blue; color: white;
}
</style> </head> <body>
Right Aligned & Offset
</body> </html>
</source>
Set margin-left and margin-right
<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>
Shrinkwrapped Absolute left offset
<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: 295px; width: 600px; border: 2px solid black;
}
- .parent {
margin: 10px; padding: 10px; padding-top: 0; border: 1px solid black;
}
- .rumon {
padding: 5px; border: 5px solid black;
} div.rumon span {
margin-left: -60px; border: 1px dotted black;
} span.rumon span {
margin-left: 30px; border: none;
}
- wa {
position: absolute; text-align: left; top: 0; margin-top: 200px; width: auto; left: 0; margin-left: -50px; right: auto; margin-right: auto; background-color: pink;
} </style> </head> <body>
Shrinkwrapped Absolute: -50px
</body> </html>
</source>
Sized Absolute left offset
<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: 295px; width: 600px; border: 2px solid black;
}
- .parent {
margin: 10px; padding: 10px; padding-top: 0; border: 1px solid black;
}
- .rumon {
padding: 5px; border: 5px solid black;
} div.rumon span {
margin-left: -60px; border: 1px dotted black;
} span.rumon span {
margin-left: 30px; border: none;
}
- myAbsolute {
position: absolute; text-align: left; top: 0; margin-top: 155px; width: 400px; left: 0; margin-left: -50px; right: auto; margin-right: auto; background-color: yellow;
} </style> </head> <body>
Sized Absolute: -50px
</body> </html>
</source>
Static Block centered offset
<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: 295px; width: 600px; 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;
}
- .ex span {
margin-left: -40px;
}
- ss {
position: static; text-align: center; margin-top: 5px; width: auto; margin-left: 90px; margin-right: 10px; background-color: gold;
} </style> </head> <body>
</body> </html>
</source>
Stretched Absolute left offset
<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: 295px; width: 600px; border: 2px solid black;
}
- .parent {
margin: 10px; padding: 10px; padding-top: 0; border: 1px solid black;
}
- .rumon {
padding: 5px; border: 5px solid black;
} div.rumon span {
margin-left: -60px; border: 1px dotted black;
} span.rumon span {
margin-left: 30px; border: none;
}
- sa {
position: absolute; text-align: left; top: 0; margin-top: 245px; width: auto; left: 0; margin-left: -50px; right: 0; margin-right: 0; background-color: gold;
} </style> </head> <body>
Stretched Absolute:-50px
</body> </html>
</source>
three pixel offset by 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: red; width: 300px; } div#float { background: lightgrey; float: left; border: 1px solid black; width: 75px; height: 50px; } p { margin-left: 76px; border: 1px solid black; } </style> </head> <body>
Float text.
Paragraph text. Paragraph text. Paragraph text.
</body>
</html>
</source>