面试题：CSS盒模型中内边距和外边距在布局中的应用区别

Question

请阐述在CSS盒模型里，内边距（padding）和外边距（margin）在实际网页布局中的应用场景以及它们的区别，同时举例说明如何通过设置内边距和外边距来调整元素间的间距。

Answer 1

应用场景

• 内边距（padding）：用于控制元素内容与元素边框之间的距离。例如，在一个按钮内部，为了让按钮上的文字不紧贴着按钮边框，可设置适当的内边距，使其看起来更美观、舒适。在图片展示中，为了避免图片紧贴容器边缘，也会设置内边距。
• 外边距（margin）：用于控制元素与其他元素之间的距离。常用于在一排列表项之间设置间距，使每个列表项之间有一定的间隔；或者在网页标题与正文段落之间设置外边距，将标题与正文区分开来。

区别

• 作用对象：内边距作用于元素自身内部，影响的是元素内容与边框的距离；外边距作用于元素与其他元素之间，影响的是元素与周围元素的距离。
• 背景显示：内边距会延伸元素的背景，即背景会覆盖内边距区域；而外边距不会延伸背景，是透明的。
• 是否影响布局尺寸：内边距会增加元素自身的尺寸（在标准盒模型下，width 和 height 不包括 padding）；外边距不会增加元素自身尺寸，而是在元素周围创建额外空间。

举例

假设我们有两个 div 元素，HTML 代码如下：

<div class="box1">这是第一个盒子</div>
<div class="box2">这是第二个盒子</div>

CSS 代码设置内边距和外边距来调整间距：

.box1 {
  background-color: lightblue;
  padding: 20px; /* 设置内边距，使内容与边框距离为20px */
  margin-bottom: 30px; /* 设置下边距，与下一个元素距离为30px */
}
.box2 {
  background-color: lightgreen;
}

在上述代码中，.box1 通过 padding 设置了内边距，使文字与边框有 20px 的距离；通过 margin-bottom 设置了 30px 的下边距，让 .box1 与 .box2 之间有 30px 的间隔。