HTML/CSS/Box Model/margin right
Содержание
- 1 Aligned center horizontally for absolute position
- 2 Aligned center vertically for absolute position
- 3 Center Aligned static
- 4 Centered body
- 5 This is the title
- 5.1 Center-middle Aligned
- 5.2 Left Aligned and Offset Static Block
- 5.3 Left Aligned Sized Static Block with margin-right: auto
- 5.4 Right Aligned static
- 5.5 Right-top Aligned and Offset
- 5.6 Set margin for four directions
- 5.7 Set margin left and right to auto
- 5.8 Lorem ipsum dolor sit amet
- 5.9 Nulla cursus semper metus
- 5.10 Sized Absolute right aligned
- 5.11 Sized Relative block
- 5.12 Sized Static Block right aligned
- 5.13 Stretched Absolute right offset
- 5.14 Stretched Static Block right aligned
Aligned center horizontally for absolute position
<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; background: black;
}
- cm {
position: absolute;
}
- .centeredMargin {
width: 200px; left: 0; margin-left: auto; right: 0; margin-right: auto; background: red;
} </style> </head> <body>
Horizontally & Vertically Centered
</body> </html>
</source>
Aligned center vertically for absolute position
<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; background: black;
}
- cm {
position: absolute;
}
- .centeredMargin {
width: 200px; left: 0; margin-left: auto; right: 0; margin-right: auto; background: red;
} </style> </head> <body>
Horizontally & Vertically Centered
</body> </html>
</source>
Center Aligned static
<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;
}
- center {
position: static; width: 120px; margin-left: auto; margin-right: auto; background: gold;
} </style> </head> <body>
Center Aligned
</body> </html>
</source>
Centered body
<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=ISO-8859-1" /> <title>Centered body</title> <style type="text/css"> body {
background: #ccc; border: 1px solid black; padding: 20px; margin-left: auto; margin-right: auto; width: 20em;
} </style> </head> <body>
This is the title
this is a test. this is a test.
</body> </html>
</source>
Center-middle Aligned
<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;
}
- cm {
position: absolute; width: 200px; left: 0; margin-left: auto; right: 0; margin-right: auto; height: 18px; top: 0; margin-top: auto; bottom: 0; margin-bottom: auto; background: red;
} </style> </head> <body>
Center-middle Aligned
</body> </html>
</source>
Left Aligned and Offset Static Block
<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 {
position: static; width: 120px; margin-left: 0; margin-right: auto; background: red;
} </style> </head> <body>
Left Aligned
</body> </html>
</source>
Left Aligned Sized Static Block with margin-right: 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 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; background-color: gold;
}
- sizedStaticBlock {
position: static; text-align: left; margin-top: 5px; width: 400px; margin-left: 0; margin-right: auto;
} </style> </head> <body>
</body> </html>
</source>
Right Aligned static
<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 {
position: static; width: 120px; margin-left: auto; margin-right: 0; background: yellow;
} </style> </head> <body>
Right Aligned
</body> </html>
</source>
Right-top 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;
}
- rt {
position: absolute; width: 220px; left: auto; margin-left: auto; right: 0; margin-right: 8px; height: 18px; top: 0; margin-top: 8px; bottom: auto; margin-bottom: auto; background: red;
} </style> </head> <body>
Right-top Aligned and Offset
</body> </html>
</source>
Set margin for four directions
<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 {
width: 100px; height: 100px; background: pink; border: 1px solid pink;
} div#top-rightleft-bottom {
margin-right: 5px;
} div#top-rightleft-bottom-1 {
margin: 15px 5px 10px;
}
</style> </head> <body>
</body>
</html>
</source>
Set margin left and right to 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h1, h2, h3 {
margin-left: auto; margin-right: auto;
} </style> </head> <body>
Lorem ipsum dolor sit amet
Nulla cursus semper metus
this is a text.
</body> </html>
</source>
Sized Absolute right aligned
<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;
}
- .example {
padding: 5px; border: 5px solid black;
}
- myAbsolute {
position: absolute; text-align: right; top: 0; margin-top: 155px; width: 400px; left: auto; margin-left: auto; right: 0; margin-right: 0; background-color: gold;
}</style> </head> <body>
Sized Absolute
</body> </html>
</source>
Sized Relative block
<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;
}
- .example {
padding: 5px; border: 5px solid black;
}
- myAbsolute {
position: relative; text-align: right; top: 0; margin-top: 155px; width: 400px; left: auto; margin-left: auto; right: 0; margin-right: 0; background-color: gold;
}</style> </head> <body>
Sized Relative
</body> </html>
</source>
Sized Static Block right aligned
<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;
}
- .example {
padding: 5px; border: 5px solid black;
}
- sizedStaticBlock {
position: static; text-align: right; margin-top: 5px; width: 400px; margin-left: auto; margin-right: 0; background-color: gold;
} </style> </head> <body>
</body> </html>
</source>
Stretched Absolute right 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;
}
- .extraStyle {
padding: 5px; border: 5px solid black;
} div.extraStyle span {
margin-right: -60px; border: 1px dotted black;
} span.extraStyle span {
margin-right: 30px; border: none; background-color: gold;
}
- sa {
position: absolute; text-align: right; top: 0; margin-top: 245px; width: auto; left: 0; margin-left: 0; right: 0; margin-right: -50px; background-color: gold;
} </style> </head> <body>
-50px
</body> </html>
</source>
Stretched Static Block right aligned
<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;
}
- .example {
padding: 5px; border: 5px solid black;
}
- myStyle {
position: static; text-align: right; margin-top: 5px; width: auto; margin-left: 0; margin-right: 0; background-color: gold;
}</style> </head> <body>
</body> </html>
</source>