margin 与 padding

padding 是内容与边框之间的「内衬」，属于盒子内部，背景色会延伸过来；margin 是盒子与其他盒子之间的「外部距离」，完全透明，不显示背景。

两者都支持四值速记，按上、右、下、左顺时针排列：

• margin: 10px; 四边全为 10px
• margin: 10px 20px; 上下 10px、左右 20px
• margin: 10px 20px 30px; 上 10、左右 20、下 30
• margin: 10px 20px 30px 40px; 上右下左各不相同

两个技巧：margin: 0 auto; 让块级元素在父容器中水平居中；margin 允许负值（用于微调重叠），padding 不允许负值。另外行内元素的 margin 上下方向不生效，需要注意。

<style>
  .card {
    width: 260px;
    padding: 16px 24px;       /* 上下16 左右24 */
    margin: 20px auto;        /* 上下20，水平居中 */
    background: #eef6ff;
    border: 1px solid #b3d7ff;
  }
  .card p {
    margin: 0 0 8px;          /* 段落间留 8px */
  }
</style>
<div class="card">
  <p>卡片标题</p>
  <p>padding 让文字不贴边，margin 让卡片居中。</p>
</div>

📤 分享本文

微博QQQ+贴豆XfinRTGPWA✉

📚 推荐阅读

YY UED 前端规范指南万象云档优达学城前端样式指南万象云档移动前端开发经验指南万象云档Element Plus v2.2 组件库教程万象云档带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读