原理
html中的元素可以分为顶级元素（top-level）、块级元素（block-level）和内联元素（inline），其中的块级元素均可以用box model来解释说明。
块级元素从外到内由margin、border、background（背景颜色/图片）、padding和content五个部分组成，如下图所示：
margin用于隔开元素和元素，使元素之间不相互干扰；
padding用于隔开元素与它里面的内容，使内容（文字）和元素之间有一定的距离。
在浏览器中，输入F12查看网页的Elements也可以看到元素对应的box model，如下图所示：
代码说明
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用Margin还是用Padding</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle_2{width:160px; background:#cfc; padding:20px 0px;}
.middle_2 .firstChild{}
.middle_2 .secondChild{margin-top:15px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle_2">
<div class="firstChild">我是firstChild，我只是想和我的父元素隔开点距离，这样看起来舒服</div>
<div class="secondChild">我是secondChild，我要和楼上隔开点的距离。恩，能与底边有点呼吸距离就更好了。</div>
</div>
</body>
</html>
3601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
