margin和padding的使用区别

我们在前端开发中经常会遇到需要进行组件分隔的情况，大多数情况下我们都会选择margin，但是padding真的没有用吗？

首先我们先要大致了解margin和padding的含义

假设树林里现在有两个小屋

margin就是小屋（墙壁）和小屋（墙壁）之间的距离

padding就是小屋里面的人和小屋墙壁之间的距离

假设现在我们要做一个卡片组件

<div class="card">
    <h2>卡片标题</h2>
    <p>卡片的描述性文字</p>
</div>

.card{
    border: 1px solid #ccc;
    padding: 15px; /*内部填充，使得内容远离边框*/
    margin-bottom: 20px; /*底部外边距，使得卡片间有适当的间隔*/
}

这里padding：15px使得卡片里面的标题和描述文字都和边框有足够的空间分开，magin-bottom为下方可能存在的其他卡片或其他元素留出了必要的空间