01_06.padding属性

最新推荐文章于 2024-05-10 09:57:10 发布

原创最新推荐文章于 2024-05-10 09:57:10 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

XHTML+CSS 专栏收录该内容

42 篇文章

订阅专栏

本文通过三个实例演示了如何使用 CSS 的 padding 属性来调整 div 元素的内边距，展示了不同 padding 设置对布局的影响。

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="style/01_06_padding.css">
	</head>
	<body>
		1.box：150*150
		<div id="p1">我是内容，我外面是box，嘿嘿。。	</div>
		<hr />
		2.box：150*150........padding:30px
		<div id="p2">我是内容<br />（我好像胖了30px，把box挤大了.....）</div>
		<hr />
		3.box：90*90..........padding：30px
		<div id="p3">box，你回到原来那样吧..<br />我还是想念原来那个你..</div>
		尽管回到了原来，但是我们之间还是有了距离。。。
	</body>
</html>

div{
	font-size: 10px;
}
#p1{
	width: 150px;
	height: 150px;
	background: #50CA65;
	border:solid red 1px;

}
#p2{
	width: 150px;
	height: 150px;
	background: #50CA65;
	border:solid red 1px;
	padding:30px;
}
#p3{
	width: 90px;
	height: 90px;
	background: #50CA65;
	border:solid red 1px;
	padding:30px;
}