margin与padding的区别

最新推荐文章于 2024-07-09 15:07:03 发布

wanyuwenrou

最新推荐文章于 2024-07-09 15:07:03 发布

阅读量1k

点赞数 1

文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/wanyuwenrou/article/details/121916746

版权

margin，是其容器与其父容器的距离，也可以是同级元素的距离，也叫外边距。打个比喻，父容器是一间教室，子容器是教室里的座椅，通过margin改变座椅相对于教室的距离。也可以改变自己相对于其他座椅的距离。这里的margin是设置在座椅上的。

常用属性top，right，bottom，left；分别对应上右下左。先设置一个div，再在里面设置两个div。

<!doctype html>
<html>
    <head>
        <mateset="utf-8"/>
        <title>maring与padding</title>
        <style type="text/css">
        #a{
            width:600px;
            height:600px;
            background-color: blue;
        }
        #b{
            width:200px;
            height:200px;
            background-color: red;
            
        }
        #c{
            width:200px;
            height:200px;
            background-color: green;
        }
        </style>
    </head>
    <body>
        <div id="a">
            <div id="b">bbbbb</div>
            <div id="c">ccccc</div>
        </div>
    </body>
</html>

效果请往下看

我们给b容器加上一个margin-left：50px；属性。

我们发现b容器距离父容器左边的距离增加了50px。这是相对于它的父容器的距离增加了50px。我们将margin-left属性去掉，给c容器添加一个margin-top属性。

这一次的margin-top属性并没有相较于父容器增加50px；而是相较于b容器增加了50px的距离。由此我们可以得出margin不仅可以调整子容器与父容器的距离，也可以调整同级元素之间的距离。

在使用中，也经常使用margin：0 auto；使其保持水平居中。

padding，是边框距离内容的距离，也叫内边框。将刚才的margin属性去掉，给b容器加上一个margin：0 auto；属性。

再给b容器加上一个padding-left属性。

原本的bbbbb是紧挨着左边的，在加了padding-left属性后，bbbbb距离左边的距离变大了。由此可以得出padding是改变距离内部的内容的距离。仔细观察，我们还发现b容器变宽了。在设置padding-left属性时，我们并没有改动它的宽度，并且把容器有具体的宽度，不会随内容大小的改变而改变。由此又可以得出padding属性会改变容器的实际大小。想要将它变回原来大小，将padding所增加的距离在容器对应的高度或者宽度减去即可。我们给b容器的宽度减去padding增加的距离。