HTML/CSS/Box Model/margin top
Содержание
A paragraph with top and bottom margins set at 5%
<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: #808;
} p {
background: #c0c; margin-left: 20%; padding-left: 10%; margin-top: 5%; margin-bottom: 5%;
} </style> </head> <body>
A paragraph with top and bottom margins set at 5%
</body> </html>
</source>
Independently set margin-left, margin-right, margin-top, and margin-bottom.
<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: 200px; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
Layered with negative top 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">
- .static {
position: static; background: red;
}
- .overlap {
margin-top: -22px; background: yellow;
}
- .relative {
position: relative; background: pink;
}
- .fixed {
position: fixed; margin-top: -16px; background: gold;
}
- .absolute {
position: absolute; top: 65px; background: blue;
} </style> </head> <body>
Static Overlapping Block
Static Overlapping Block
Overlapping Table |
</body> </html>
</source>
margin-top: .33em
<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"> label {
margin-top: .33em; display: block;
} </style> </head> <body>
My Amazing Web Site
Contact Form
This is a test.
Please fill out our form below in order to contact me.
<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>
Note: Due to our busy schedules, we cannot answer every message.
header
This is a text
</body> </html>
</source>
Set image margin top and left to negative 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> <title></title> <style type="text/css"> img {
position: absolute; top: 50%; left: 50%; margin-top: -96px; margin-left: -138px; height: 192px; width: 256px;
} </style> </head> <body>
<img src="w.jpg" width="256" height="192" alt="Photo">
</body> </html>
</source>
Top Aligned Absolute 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;
}
- .ex {
padding: 5px; border: 5px solid black; width: 120px; text-align: center; position: relative;
}
- .ex span {
left: 0; width: 130px; height: auto;
}
- myAbsolute {
height: 100px; top: 0; margin-top: 0; bottom: auto; margin-bottom: auto; position: absolute; margin-left: 200px; background-color: gold;
} </style> </head> <body>
Sized Absolute
</body> </html>
</source>
Top 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 {
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;
}
- .innerClass {
padding: 5px; border: 5px solid black; width: 120px; text-align: center; position: relative;
}
- .innerClass span {
left: 0; width: 130px; height: auto;
}
- myStyle {
height: auto; margin-top: -70px; margin-bottom: 0; position: static; background-color: yellow; background-color: gold;
} </style> </head> <body>
</body> </html>
</source>