css中margin padding border的区别

最新推荐文章于 2022-09-24 12:11:54 发布

萌新的小小罗

最新推荐文章于 2022-09-24 12:11:54 发布

阅读量248

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/m0_51499496/article/details/109388783

版权

本文通过相框比喻解释了CSS中的padding、border和margin的概念。padding表示内容到边框的距离，border是元素的边框，margin则是元素间的间距。文章通过实例展示了如何设置和理解这三个属性，并强调了在实际应用中行标签和块标签对margin的影响。建议使用浏览器的开发者工具辅助理解CSS属性。

摘要由CSDN通过智能技术生成

文章目录

padding

padding指标签里面的内容centent到border的这部分区域。假如我们把这个抽象化，用我们家里面的相框来比喻。centent值的就是相框里面的照片。假设这个照片并不是全部布满相框，也是可以随意移动。就是如果这个相框是400px，而这个照片只有300px，并且这个照片只能中心摆放(也就是距离相框的上下左右的距离是一样的大小）。这个时候照片距离相框的距离为100px，这部分就是我们说的padding。注意：如果我们将padding设置为200px的时候，照片大小是不会改变的只会换一个更大的相框，同时照片距离相框的大小为200px。也就是我们经常画矩形时候，利用div让其padding将其撑大。

在这里插入图片描述

<style>
   div{
       padding: 60px;
       border: 10px solid #000;
       background-color: gray;
       font-size: 20px;
   }
</style>
<body>
    <div>
        padding是指标签centent到border（border里面这条线）的距离。
    </div>

你可以多用谷歌浏览器F12，检查自己的元素。

barder

我们依旧利用相框来比喻。上文我们一直都没有提到那个相框的大小（就是相框上下左右那四个木条）。这四个木条就是border。还可以再形象点就是如果你用一个超粗的笔画提个正方形（没有填充）这四条线就是border。粗细就是指border的大小。border的用法第一个指粗细，第二个solid指边框实体化也就是说是实线，当然还有其他参数形式只是solid用的比较多。第三个是设置边框的颜色，#000代表黑色。

border: 10px solid #000;

margin

margin是指两个标签之间的距离。如果你不是很懂下面的行标签和块标签，你可以网上查阅一下什么是行标签，什么是块标签。这个将会使你更加深刻理解margin在实际中的时候你出现的一些问题。margin是指两个标签之前距离。依据用照片来比喻。在你家墙上同一行摆放着两张照片，两张照片的相框距离就是margin。左边照片的右边框的靠近右边照片的走边框的距离，就是左边照片的margin-right。同理这部分距离就是右边照片的margin-left距离。
在你给标签设置css的样式时候，如果你写了两个行标签给他设置margin的时候，比如div就是属于行标签，你给两个div标签设置margin想让后面那个div与前面那个div隔开来。这个时候你会发现这两个标签换行并且后面这个标签没有跟前面这个标签对齐，而是隔开一段距离。如果你理解行和块标签，这个不难理解。因为两个行标签，导致第二个div换行，这个时候你给后面这个div设置margin-left它对应的就是页面了，准确的将不是页面是body标签。你要是想让第二个div标签和第一个div标签在同一行，你可以直接在给这个div标签css样式添加display：inline来解决。

在这里插入图片描述

<style>
    #div1 {
        padding: 200px;
        background-color: gray;
        display: inline;

    }

    #div2 {
        margin-left: 50px;
        padding: 200px;
        background-color:blue;
        display: inline;
    }
</style>

<body>
    <div id="div1">

    </div>
    <div id="div2">

    </div>

</body>