HTML/CSS/Box Model/margin — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:16, 26 мая 2010
Содержание
- 1 Add margin to offset block nearby
- 2 A margin negative value moves it away from center.
- 3 Body margin to 10%
- 4 header 2
- 5 Body with margin:%
- 6 header 2
- 7 Define Margin with value and percent
- 8 The heading for this page
- 8.1 double-margin
- 8.2 double margin fixed
- 8.3 LI margin: 0.33em 0.5em 0.5em 1.5em
- 8.4 margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement.
- 8.5 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.
- 8.6 margin: 1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).
- 8.7 Margin between parent and children
- 8.8 Margin between sibling
- 8.9 margin collapse
- 8.10 margin collapse nested elements
- 8.11 margin collapse nested elements default padding
- 8.12 margin collapse nested elements padding
- 8.13 margin collapse with nested elements
- 8.14 Margin Collapsing
- 8.15 Margin collapsing also happens between parent and child elements.
- 8.16 Margin collapsing with adjacent siblings.
- 8.17 margin sets the size of the margin surrounding the border.
- 9 Box Model
- 10 The heading for this page
- 10.1 Use margin to align block to center
- 10.2 Use margin to align block to left
- 10.3 Use margin to align block to right
- 10.4 Use margin to offset child
- 10.5 When all four values are provided, each is provided in order clockwise, beginning with the top property.
- 10.6 When one value is supplied to the margin shorthand property, all four sides are specified with that one value.
- 10.7 When three values are supplied, the top is the first, the right and left sides are the second, and the bottom is the third.
- 10.8 When two values are supplied to the margin shorthand property, the top and bottom are the first, right and left sides are the second.
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;
}
- content {
padding: 10px 2% 10px 2%; margin: 5px 26% 5px 2%; background-color: #fff; border: 1px solid #000;
}
- 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>
</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;
}
- box1 {
margin: 10px; background-color:#d5d5d5;
}
- 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>
</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>
</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>
</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>
</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>
</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>
</body>
</html>
</source>