【CSS】Box Model中的padding、margin、border

最新推荐文章于 2025-02-06 16:32:07 发布

原创最新推荐文章于 2025-02-06 16:32:07 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析HTML中块级元素的Box Model概念，包括margin、border、background、padding和content五个组成部分的作用与区别，通过实例代码展示了如何使用margin和padding实现元素间的间隔。

原理

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>