通过合理使用margin和border可有效控制卡片间距：① margin决定卡片间距离，设置一致外边距可形成均匀间隔；② border定义视觉边界并影响实际尺寸，需配合box-sizing:border-box避免布局溢出；③ 结合细边框与适当margin能营造整齐且有呼吸感的布局效果。
在CSS中，通过盒模型控制卡片的间距，关键在于合理使用 margin、border 和 padding。其中，margin 控制卡片之间的外部间距，border 定义卡片边框样式并影响整体尺寸，两者结合能有效塑造卡片布局的视觉层次和间隔效果。
理解盒模型中的 margin 与 border
每个HTML元素都被视为一个矩形盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成：
- margin：盒子与其他元素之间的透明空间，不包含背景色或边框
- border：围绕 padding 和内容的边线，占据实际空间，会影响盒子总宽高
当设置卡片的间距时，margin 决定卡片之间隔多远，而 border 不仅提供视觉边界，也会增加盒子的实际占用空间，尤其在 box-sizing: border-box 未启用时更需注意。
使用 margin 控制卡片间距
为卡片设置一致的外边距，可以形成均匀的间隔：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 200px;
margin: 16px; /* 上下左右各16px，卡片之间最小间距为32px */
background: white;
border: 1px solid #ddd;
}
若卡片在容器中水平排列，可只设置右侧或左侧 margin 避免首尾多余空白：
.card {
display: inline-block;
margin-right: 16px;
}
.card:last-child {
margin-right: 0;
}
border 如何影响间距表现
border 虽然主要起装饰作用，但其宽度会直接影响卡片的实际尺寸。例如两个相邻卡片各设置 2px 边框，在视觉上它们的边框会“接触”或“重叠”，可能让间距显得更紧凑。
- 使用
border-box确保边框包含在设定的宽高中，避免布局溢出 - 若希望边框之间有空隙，需通过增加 margin 来补偿 border 的视觉压迫感
.card {
width: 200px;
padding: 12px;
border: 2px solid #ccc;
margin: 16px;
box-sizing: border-box;
}
margin 与 border 结合的实用技巧
合理搭配两者，可以让卡片组看起来既整齐又有呼吸感：
- 用细边框（如 1px solid #eee）定义卡片边界，配合 12–24px 的 margin 创造清爽留白
- 在网格布局中，统一设置所有卡片的 margin 和 border，确保对齐一致
- 使用负 margin 微调父容器间距，但需注意不要破坏 border 的视觉完整性
基本上就这些。掌握 margin 控制间距、border 塑造轮廓，并理解它们在盒模型中的叠加关系，就能灵活设计出美观的卡片布局。
