W3School-CSS 内边距 (padding) 实例

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) 实例总结

posted @ 2015-12-26 11:46  IamHoey  阅读(674)  评论(0)  编辑  收藏  举报