曲径通幽论坛

标题: 内边距 (padding) [打印本页]

作者: beyes 时间: 2016-12-25 23:07
标题: 内边距 (padding)
内容与边框之间的距离就是内边距，使用 padding 属性来控制，其属性值可以是长度值或百分比，但不能是负值。当值是百分数时，这个百分比是相对于父元素的 width 而言，如果父元素的 width 改变，它们也会随之变化。
可以通过 padding-top, padding-right, padding-bottom, padding-left 这 4 个属性分别控制上、右、下、左内边距。

无边距时：

[HTML] 纯文本查看 复制代码

<html>

<head>

<style type="text/css">

</style>

</head>



<body>

<table border="1">

<tr>

<td>

这个表格单元拥有下内边距。

</td>

</tr>

</table>

</body>



</html>

效果：
[attach]4777[/attach]

给出 2cm 的下边距描述时：

<style type="text/css">
td {padding-bottom: 2cm}
</style>

[attach]4778[/attach]

使用百分比的下边距描述：

td
{
padding-bottom: 10%
}

[attach]4779[/attach]
这个没有下边距描述时，表格宽度为 5.6cm；指定 10% 的下边距，也就是会有 0.56cm 的宽度。如上图，使用屏幕标尺工具可以测量知道，增加出来的下边距确实为 0.56cm 。

其它方向属性类似指定。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)