📄 css_margin.asp@output=print
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Margin Properties</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>CSS Margin</h1>
<a href="css_outline.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_padding.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">The CSS margin properties define the space around elements.</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin">All the margin properties in one declaration</a><br />
This example demonstrates how to set a shorthand property for setting all of the margin properties
in one declaration.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-top">Set the top
margin of a text using a cm value</a><br />
This example demonstrates how to set the top margin of a text using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-top_percent">Set
the top margin of a text using a percent value</a><br />
This example demonstrates how to set the top margin of a text using a percent
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-bottom">Set the
bottom margin of a text using a cm value</a><br />
This example demonstrates how to set the bottom margin of a text using a cm
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-bottom_percent">Set
the bottom margin of a text using a percent value</a><br />
This example demonstrates how to set the bottom margin of a text using a percent
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-left">Set the left
margin of a text using a cm value</a><br />
This example demonstrates how to set the left margin of a text using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-left_percent">Set
the left margin of a text using a percent value</a><br />
This example demonstrates how to set the left margin of a text using a percent
value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-right">Set the
right margin of a text using a cm value</a><br />
This example demonstrates how to set the right margin of a text using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_margin-right_percent">Set
the right margin of a text using a percent value</a><br />
This example demonstrates how to set the right margin of a text using a percent
value.</p>
<hr />
<h2>CSS Margin Properties</h2>
<p>The CSS margin properties define the space around elements. It is possible to use
negative values to overlap content. The top, right, bottom, and left margin can
be changed independently using separate properties. A shorthand margin property
can also be used to change all of the margins at once.</p>
<p><b>Note:</b> Netscape and IE give the body tag a default margin of
8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one
wants to adjust the margin for an entire page and have it display correctly in
Opera, the body padding must be set as well!</p>
<p>
<b>Browser support:</b> IE: Internet Explorer, F: Firefox, N: Netscape.</p>
<p>
<b>W3C:</b> The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).</p>
<table class="ex" cellspacing="0" border="1" width="100%" cellpadding="3">
<tr>
<th width="25%" align="left">Property</th>
<th width="30%" align="left">Description</th>
<th width="25%" align="left">Values</th>
<th width="5%" align="left">IE</th>
<th width="4%" align="left">F</th>
<th width="4%" align="left">N</th>
<th width="7%" align="left">W3C</th>
</tr>
<tr>
<td valign="top"><a href="pr_margin.asp">margin</a>
</td>
<td valign="top">A shorthand property for setting the margin properties in
one declaration</td>
<td valign="top"><i>margin-top<br />
margin-right<br />
margin-bottom<br />
margin-left</i></td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top">
<p><a href="pr_margin-bottom.asp">margin-bottom</a>
</p>
</td>
<td valign="top">Sets the bottom margin of an element</td>
<td valign="top">auto<br />
<i>length<br />
%</i></td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top">
<p><a href="pr_margin-left.asp">margin-left</a>
</p>
</td>
<td valign="top">Sets the left margin of an element</td>
<td valign="top">auto<br />
<i>length<br />
%</i></td>
<td valign="top">3</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top">
<p><a href="pr_margin-right.asp">margin-right</a>
</p>
</td>
<td valign="top">Sets the right margin of an element</td>
<td valign="top">auto<br />
<i>length<br />
%</i></td>
<td valign="top">3</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top"><a href="pr_margin-top.asp">margin-top</a>
</td>
<td valign="top">Sets the top margin of an element</td>
<td valign="top">auto<br />
<i>length<br />
%</i></td>
<td valign="top">3</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
</table>
<br />
<hr />
<a href="css_outline.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_padding.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -