CSS 内边距 (padding) 实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
CSS 内边距 (padding) 实例- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline） 实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01所有填充属性在一个声明中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01所有填充属性在一个声明中</title>
<style type="text/css">
body {
background-color: rgb(180, 204, 134);
}
.test1 {
padding: 1.5cm;
}
.test2 {
padding: 0.5cm 2.5cm;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
<td>
我是来打酱油的。。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
</body>
</html>
02设置上下内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>02设置上下内边距</title>
<style type="text/css">
body {
background-color: rgb(180, 204, 134);
}
td.test1 {
padding-top: 2cm;
}
td.test2 {
padding-top: 10%;
}
td.test3 {
padding-bottom: 2cm;
}
td.test4 {
padding-bottom: 10%;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
我用长度设置上内边距。
</td>
<td class="test2">
我用百分比设置上内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test3">
我用长度设置下内边距。
</td>
<td class="test4">
我用百分比设置下内边距。
</td>
</tr>
</table>
</body>
</html>
03设置左右内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03设置左右内边距</title>
<style type="text/css">
body {
background-color: rgb(180, 204, 134);
}
td.test1 {
padding-left: 2cm;
}
td.test2 {
padding-left: 10%;
}
td.test3 {
padding-right: 2cm;
}
td.test4 {
padding-right: 10%;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
我用长度设置左内边距。
</td>
<td class="test2">
我用百分比设置左内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test3">
我用长度设置右内边距。
</td>
<td class="test4">
我用百分比设置右内边距。
</td>
</tr>
</table>
</body>
</html>
CSS 内边距 (padding) 实例总结
