答案：通过合理使用margin和padding可精确控制网页留白。margin设置元素外间距，影响布局空间；padding设定内边距，提升内容舒适度。示例中.card用padding保证内容不贴边，margin-bottom实现卡片间隔，.container通过margin居中与padding两侧留白，结合:last-child去除多余间距，构建清晰响应式布局。
在HTML和CSS中，留白主要通过 margin 和 padding 控制，它们是实现页面布局和元素间距的核心手段。虽然HTML本身不直接处理样式，但结合CSS可以精确控制元素周围的空白区域。
理解 margin 与 padding 的区别
margin 是元素边框外的空白，用于控制元素与其他元素之间的距离；padding 是元素边框内的空白，即内容与边框之间的距离。两者都会影响布局，但作用范围不同。
例如：
.box {
width: 200px;
height: 100px;
background: #eee;
border: 1px solid #ccc;
margin: 20px; /* 外边距，影响与其他元素的间隔 */
padding: 15px; /* 内边距，内容离边框更远 */
}
在这个例子中，.box 实际占用的水平空间为：200px宽 + 左右各20px margin + 左右各1px边框 = 242px。padding 不增加元素外部尺寸，但会影响内部可用空间。
立即学习“前端免费学习笔记（深入）”；
常见留白布局技巧
合理使用 margin 和 padding 可以让页面结构清晰、视觉舒适。
- 垂直间距用 margin：段落之间、标题与内容之间通常设置 margin-top 或 margin-bottom 来留出呼吸空间。
- 容器内留白用 padding：如卡片、导航栏等内容贴近边缘时，加 padding 避免拥挤。
- 避免外边距塌陷问题：相邻两个块级元素都设置了 vertical margin，实际间距可能不是相加值，而是取较大者。可通过设置父元素 display: flow-root 或使用 padding 替代部分 margin 解决。
- 响应式留白：配合百分比、rem 或 clamp() 函数设置动态间距，适配不同屏幕。
实用示例：创建带间距的卡片列表
以下是一个简单的卡片布局，展示如何利用 margin 和 padding 构建清晰结构：
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px; /* 内容与边框的距离 */
margin-bottom: 16px; /* 卡片之间的间距 */
}
.card:last-child {
margin-bottom: 0; /* 最后一个去掉下边距 */
}
.container {
max-width: 800px;
margin: 0 auto; /* 水平居中容器 */
padding: 20px; /* 页面两侧留白 */
}
这种结构既保证了内部内容不贴边，又让多个卡片之间有合适间隔，整体布局干净有序。
基本上就这些常用方法。掌握 margin 和 padding 的特性与使用场景，能有效提升网页的可读性和美观度。
