margin与padding的区别

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增加的距离。

容器的大小变回了原来的大小，并且里面的内容也更靠右一些。在实际运用中，很多时候我们都忘记了padding属性会增加容器的实际大小，导致出现问题。出现问题后，需要多想一想是什么原因导致的错误，往往导致错误的并不是最直接的因素，而是其他一些一点都不起眼的小属性。

margin与padding的区别相关推荐

【margin和padding的区别】
margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...
CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
margin和padding的区别和用法
margin和padding的区别和用法什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...
gap，margin和padding的区别
gap,margin和padding的区别 gap和padding都是css中的样式,在bootstrap中的p-5和g-4指的分别是对padding设置和gap的设置 gap gap针对的是grid ...
Android布局中margin与padding的区别
我们知道Android开发不仅仅有代码的动态控制,而且还涉及到布局的静态搭建(xml).几乎在每一个xml文件中,我们总会看到margin和padding这两个属性,今天让我们初步探究一下它们之间的区 ...
CSS样式表margin和padding的区别
用css时,首先要做的是把所有的标签margin和padding都清空.这样更容易控制浏览器的布局和兼容浏览器. 清空方法:*{margin:0; padding:0;} *是通配 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
Java前端（CSS）关于margin和padding的区别
首先,知道这两个单词的汉语翻译,有助于我们理解. margin: n.页边的空白:栏外:边缘:余裕:保证金:利润 vt.加边:记在页边:加上保证金语法结构:(padding也相同) margin包括 ...
margin和padding的区别
https://www.cnblogs.com/zxnn/p/8186225.html

margin与padding的区别

margin与padding的区别相关推荐

最新文章

热门文章