Ceryn

CSS 边距

7分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 外边距

CSS 内边距

margin | MDN

padding | MDN

引入

网页元素之间需要有距离，元素内容和边框之间也需要有距离。

CSS 中常用 margin 控制外边距，用 padding 控制内边距。

正文

定义

定义

margin 用来设置元素外部的距离，padding 用来设置元素内部的距离。

简单说：

  • margin 控制元素和其他元素之间的距离
  • padding 控制元素内容和边框之间的距离

它们都属于 CSS 盒模型 中的重要部分。

语法

.box {
  margin: 20px;
  padding: 16px;
}

这里的 .box 外部会有 20px 的距离，内部内容和边缘之间会有 16px 的距离。

margin

margin 是外边距，用来控制元素外部的空间。

.box {
  margin: 20px;
}

常见用法：

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

分别控制上、右、下、左四个方向。

padding

padding 是内边距，用来控制内容和边框之间的空间。

.box {
  padding: 20px;
}

常见用法：

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

padding 和 margin 写法很像，不同点是它修改的是元素内部空间。

简写规则

margin 和 padding 都支持简写。

.box {
  margin: 10px 20px 30px 40px;
}

顺序是：上、右、下、左。

可以按顺时针记忆。

写法含义
margin: 10px;四个方向都是 10px
margin: 10px 20px;上下 10px，左右 20px
margin: 10px 20px 30px;上 10px，左右 20px，下 30px
margin: 10px 20px 30px 40px;上、右、下、左

padding 的规则一样：

.box {
  padding: 10px 20px;
}

表示上下内边距是 10px，左右内边距是 20px。

margin: auto;

margin 可以使用 auto。

最常见的用法是让块级元素水平居中。

.container {
  width: 800px;
  margin: 0 auto;
}

这里的 margin: 0 auto; 表示：

  • 上下外边距是 0
  • 左右外边距自动分配

当元素有固定宽度时，左右 auto 可以让它在父元素中水平居中。

margin 和 padding 的区别

<div class="box">内容</div>
.box {
  margin: 20px;
  padding: 20px;
  border: 1px solid #cccccc;
}

这个例子中：

  • margin 在边框外面，影响元素和其他元素之间的距离
  • padding 在边框里面，影响内容和边框之间的距离

内容居中

margin: auto; 可以让块级元素本身居中。

如果想让元素内部的文本居中，可以使用 text-align: center;。

.box {
  text-align: center;
}

注意：

  • margin: 0 auto; 常用于让盒子本身水平居中
  • text-align: center; 常用于让文本或内联内容居中

文本行间距

line-height 可以修改文本每一行之间的距离。

p {
  line-height: 1.6;
}

它不是盒模型中的 margin 或 padding，但也是控制阅读间距时很常用的属性。

line-height: 1.6; 表示行高是当前字体大小的 1.6 倍。

外边距合并

上下方向的 margin 有时会发生合并。

<p class="one">第一段</p>
<p class="two">第二段</p>
.one {
  margin-bottom: 30px;
}
 
.two {
  margin-top: 20px;
}

直觉上可能以为两段之间距离是 50px。

但在某些情况下，上下外边距会合并，最终可能是较大的那个值，也就是 30px。

这叫做外边距合并。

初学时先记住：上下相邻的块级元素，margin 不一定会简单相加。

例子

设置卡片内外边距

<div class="card">
  <h2>标题</h2>
  <p>这是一段卡片内容。</p>
</div>
.card {
  margin: 20px;
  padding: 16px;
  border: 1px solid #dddddd;
}

这里的 margin 让卡片和其他元素拉开距离，padding 让文字不要贴着边框。

页面容器居中

<main class="container">
  <h1>文章标题</h1>
  <p>文章内容。</p>
</main>
.container {
  width: 800px;
  margin: 0 auto;
}

这里的 .container 会在页面中水平居中。

按钮内部留白

<button class="btn">提交</button>
.btn {
  padding: 8px 16px;
}

这里的 padding 会让按钮文字周围有留白，看起来更像一个按钮。

特点

  • margin 是外边距，控制元素外部距离
  • padding 是内边距，控制元素内部距离
  • margin 可以使用 auto
  • margin: 0 auto; 常用于块级元素水平居中
  • padding 会增加元素内部空间
  • margin 和 padding 都可以分别设置四个方向
  • 简写顺序是上、右、下、左
  • line-height 可以控制文本行间距

注意事项

  • margin 在边框外面，padding 在边框里面
  • padding 会影响元素实际占用的空间，尤其在默认盒模型下
  • 如果不想 padding 撑大元素，可以配合 box-sizing: border-box;
  • margin: auto; 水平居中通常需要元素有明确宽度
  • 上下方向的 margin 可能会发生外边距合并
  • 不要用大量空标签制造间距，应该用 CSS 控制间距

理解

可以把 padding 理解为盒子里面的填充物，让内容不要贴着边。

可以把 margin 理解为盒子外面的空地，让这个盒子和其他盒子保持距离。

调页面间距时，先想清楚：是内容离边框太近，还是元素和元素之间太近。

内容离边框太近用 padding，元素之间太近用 margin。

引出

理解了边距之后，可以继续学习 CSS 盒模型，把 content、padding、border、margin 放在一起理解。

关系图谱

反向链接