📄 css_padding.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 Padding 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 Padding</h1>
<a href="css_margin.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_list.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">The CSS padding properties define the space between the element border and the element content.</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding">All the padding properties in one
declaration</a><br />
This example demonstrates a shorthand property for setting all of the padding
properties in one declaration, can have from one to four values.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-top">Set the top padding using a cm value</a><br />
This example demonstrates how to set the top padding of a table cell using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-top_percent">Set the top padding using a percent value</a><br />
This example demonstrates how to set the top padding of a table cell using a percent value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-bottom">Set the bottom padding using a cm value</a><br />
This example demonstrates how to set the bottom padding of a table cell using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-bottom_percent">Set the bottom padding using a percent value</a><br />
This example demonstrates how to set the bottom padding of a table cell using a percent value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-left">Set the
left padding using a cm value</a><br />
This example demonstrates how to set the left padding of a table cell using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-left_percent">
Set the left padding using a percent value</a><br />
This example demonstrates how to set the left padding of a table cell using a percent value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-right">Set the right padding using a cm value</a><br />
This example demonstrates how to set the right padding of a table cell using a cm value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_padding-right_percent">Set the right padding using a percent value</a><br />
This example demonstrates how to set the right padding of a table cell using a percent value.</p>
<hr />
<h2>CSS Padding Properties</h2>
<p>The CSS padding properties define the space between the element border and the element
content. Negative values are not allowed. The top, right, bottom, and left padding can
be changed independently using separate properties. A shorthand padding property
is also created to control multiple sides at once.</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_padding.asp">padding</a></td>
<td valign="top">A shorthand property for setting all of the padding properties in
one declaration</td>
<td valign="top"><i>padding-top<br />
padding-right<br />
padding-bottom<br />
padding-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_padding-bottom.asp">padding-bottom</a></p>
</td>
<td valign="top">Sets the bottom padding of an element</td>
<td valign="top"><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_padding-left.asp">padding-left</a></p>
</td>
<td valign="top">Sets the left padding of an element</td>
<td valign="top"><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_padding-right.asp">padding-right</a></p>
</td>
<td valign="top">Sets the right padding of an element</td>
<td valign="top"><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"><a href="pr_padding-top.asp">padding-top</a></td>
<td valign="top">Sets the top padding of an element</td>
<td valign="top"><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>
</table>
<br />
<hr />
<a href="css_margin.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_list.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 + -