HTML/CSS/Box Model/margin bottom
Содержание
- 1 Aligned-center Absolute
- 2 Left-top Aligned and Offset
- 3 margin-bottom: 2em
- 4 My Amazing Web Site
- 4.1 Contact Form
- 4.2 quid pro quo
- 4.3 Right-bottom Aligned and Offset
- 4.4 Set margin for hr
- 4.5 specify margin via one of the four separate margin properties: margin-top, margin-right, margin-bottom, and margin-left.
- 4.6 Static Block Bottom Aligned with margin-bottom: 0
- 4.7 Top Aligned Static Block
- 4.8 Top and bottom margins set 5% for me
- 4.9 Top and bottom margins set 5% for me
Aligned-center 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; background: black;
}
- cm {
position: absolute;
}
- .centeredMargin {
width: 200px; left: 0; margin-left: auto; right: 0; margin-right: auto; background: red;
}
- .verticalMargin {
height: 40px; top: 0; margin-top: auto; bottom: 0; margin-bottom: auto; background: yellow;
} </style> </head> <body>
Horizontally & Vertically Centered
</body> </html>
</source>
Left-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;
}
- 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 and Offset
</body> </html>
</source>
margin-bottom: 2em
<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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css">
div#content{
margin-left: 27%; margin-bottom: 2em;
}
</style> </head> <body>
My Amazing Web Site
Contact Form
<form id="form1" name="form1" method="post" action="/">
<label for="fmtitle" accesskey="i">Title</label>
<select name="fmtitle" id="fmtitle">
<option value="ms">Ms.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss</option>
<option value="mr">Mr.</option>
</select>
<label for="fmname" accesskey="n">Name</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e">Email</label> <input type="text" name="fmemail" id="fmemail" /> <label for="fmstate" accesskey="a">State/Province</label> <input type="text" name="fmstate" id="fmstate" /> <label for="fmstate" accesskey="y">Country</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send" class="submit" /> </form>
quid pro quo
</body> </html>
</source>
Right-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;
}
- rb {
position: absolute; width: auto; left: auto; margin-left: auto; right: 0; margin-right: 8px; height: auto; top: auto; margin-top: auto; bottom: 0; margin-bottom: 8px; background: red;
} </style> </head> <body>
Right-bottom Aligned & Offset
</body> </html>
</source>
Set margin for hr
<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"> hr {
margin-left: auto; margin-right: auto; margin-top: 1.25em; margin-bottom: 1.25em; width: 10px; height: 10px; background-color: #777;
} </style> </head> <body>
This is a text
</body>
</html>
</source>
specify margin via one of the four separate margin properties: margin-top, margin-right, margin-bottom, and margin-left.
<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-properties {
margin-top: 2px; margin-right: 4px; margin-bottom: 6px; margin-left: 8px;
}
</style> </head> <body>
</body>
</html>
</source>
Static Block Bottom Aligned with margin-bottom: 0
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen">
- .grandContainer {
position: relative; height: 300px; width: 700px; 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; background-color: gold; width: 120px; text-align: center; position: relative;
}
- .extraStyle span {
height: auto; left: 0; width: 130px;
} span.extraStyle span {
position: absolute; top: auto; margin-top: auto; bottom: 0; margin-bottom: 0;
}
- sizedStaticBlock {
height: 100px; margin-top: auto; margin-bottom: 0; position: static; margin-left: 0px; background: gold;
} </style> </head> <body>
</body> </html>
</source>
Top Aligned 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 {
position: relative; height: 300px; width: 700px; 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; width: 120px; text-align: center; position: relative;
}
- .extraStyle span {
left: 0; width: 130px; height: auto;
}
- sizedStaticBlock {
height: 100px; margin-top: 0; margin-bottom: auto; position: static; background-color: gold;
} </style> </head> <body>
</body> </html>
</source>
Top and bottom margins set 5% for me
<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;
} h2 {
background-color: #c0c0c0; margin-left: 5%; margin-top: 5%; margin-bottom: 5%; padding-left: 1em;
} </style> </head> <body>
Top and bottom margins set 5% for me
</body> </html>
</source>