原理
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>