margin属性（margin属性4个值顺序）

本文目录一览：

• 1、CSS属性margin是什么意思？
• 2、深入理解margin属性
• 3、【css】外边距margin的属性和使用方法

CSS属性margin是什么意思？

margin:0 auto 0px表示上外抄边距为0px，左右外边距自动，下外边距为0px。

margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。

扩展资料：

“margin:20px 40px;”表示top为20px，right为40px；由于bottom和left缺省，所以自动将它们分别设为20px和40px。转化为第4种写法为：“margin:20px 40px 20px 40px;”。

“margin:20px 40px 60px;”表示top为20px，right为40px，bottom为60px；由于left缺省，所以自动将它设为40px。转化为第4种写法为：“margin:20px 40px 60px 40px;”。

需要注意的是一种情况不能写为缺省写法：“margin:20px 40px 20px 60px;”。该例中，由于top和bottom相同，但right和left不同，所以不能将bottom缺省，否则会等同于“margin:20px 40px 60px 40px;”。

深入理解margin属性

1 .盒子尺寸:border box。从boder 往里算原生api 是offsetWidth

2 .盒子内部尺寸：padding box。从padding往里算。原生dom api是clientWidth

3 .盒子外部尺寸:margin box。从margin往里算.没有原生的dom api

1 .如果元素有宽度，并且是块级元素.此时添加margin:元素的宽度不会发生改变

2 .父元素宽度不变，如果元素是块级，并且宽度没有给，那么margin的宽度会发生变化

3 .元素margin在垂直方向上无法改变自身的内部尺寸，往往需要父元素作为载体

1 .图片右侧定位的时候，只需要把图片的左浮动改成右浮动

1 .上面这样处理的结果就是最右边一个会有20px的空格,虽然有其他不同的解决方法，但是这里用margin的写法

2 .给ui加20px的宽度，对冲掉最后一个的20px的宽度.

3 .但是他这里说的都是float下的问题，不是不推荐使用float布局了么。。

1 .只要元素是块状元素，无论有没有设置宽高，无论是水平还是垂直方向，即使发生了margin合并，margin对外部尺寸都实实在在的发生了变化

2 .内联元素，完全无影响，不论是垂直方向，还是左右方向，不论是外部还是内部尺寸。但是加了margin还是会有间距显示的

1 .使用padding-bottom实现留白有兼容性问题，因为不同的浏览器实现滚动的逻辑是不一样的，chrome以content box为基准算是否触发滚动条，ie和firefox则是超过padding box尺寸触发滚动条。

2 .所以这种情况下直接使用margin-bottom，完全没有兼容问题

1 .两个的宽度以最多的一个为基准，算高的。但是这个css也太狰狞了吧。flex直接实现，天然支持

2 .实现原理:margin-bottom：-9999px先给外部尺寸在垂直方向减小9999px。padding-bottom：9999px又增加了元素高度，抵消了刚才的，对布局没有影响，但是带来了多的的9999px的可使用背景色.多了这个多的可使用背景色，于是父元素overflow:hidden；消除了多余的颜色。这谁想出来的。。最关键的是这种方法兼容性超级强，ie6,ie7

1 .和padding一样，也是相对于元素的宽度计算的.

2 .还是不要使用百分比算了，随便一调一个属性就是一个新的表现。完全解释不了啊.一定要走宽阔的大路

1 .必须知道的知识

2 .填充规则1：如果一侧是固定值，一侧是auto，则auto为剩余空间大小

可以看到，没有margin-left的时候，虽然有了margin-right。但是是不生效的，因为流式布局先从左边走

3 .填充规则2 ：两侧都是auto，平分固定值。这不是规则1 的特殊情况么。。

1 .首先发现设置margin:auto;左右方向会自动居中，但是上下是无效的.容器定高，容器定高为啥不行呢。

2 .甚至发现如果单独给他添加margin-top：还会发生边距折叠，给父元素加上了

3 .margin实现元素居中

1 .display:inline计算值的非替换元素的垂直margin是无效的,虽然规范提到有渲染，但是浏览器表现的无迹可寻

可以看到，有margin值，但是效果表现是无效的

2 .表格中的tr，td元素或者设置display:table-cell,table-row的margin都是无效的

3 .绝对定位的非定位方位的margin值无效

4 .高度确定父元素下子元素的margin-bottom。或者宽度确定的父元素下子元素的matgin-right失效。

本质是，如果想要margin改变自己的位置，那么必须是当前元素定位一样的方向才可以，否则就只会影响到其他兄弟元素，所以看图下一个的元素是明确可以看到被影响到了

5 .鞭长莫及的margin无效

6 .内联特性导致的margin无效

确实会在只剩一个屁股的时候不在上移动，不论负值多么变大，但是这个是父元素没有任何属性，加了一个absolute之后就不是这样了，没有这个限制了

1 .内联替换元素,垂直margin是有效的，比如照片是一定是可以的，并且不会发生margin合并

2 .如果计算值是table-caption,table或者inline-table则没有此问题

1 .block元素，可以使用四个方向的margin值

2 .inline元素，只可以使用左右方向的margin值

3 .inline-block匀速，使用上下方向的值看起来是无效的，其实是和vertial-align的值有关系

1 .两个block元素重叠时，后面元素可以覆盖前面元素的背景。但是无法覆盖内容，也就是内容是一起显示的

2 .两个inline,两个inline-block，inline和inline-block元素重叠时，后面元素会覆盖前面元素

可以看到后面的覆盖了前面的

3 .inline元素和block元素，inline覆盖block的背景，内容的话，是后面的覆盖前面的内容

4 .最后，在浏览器不居中，浏览器将页面布局分为内容和背景，内容的层叠始终高于背景，block元素分为内容和背景，而inline元素或inline-block元素，本身就是内容

【css】外边距margin的属性和使用方法

外边距很好理解，就是指边框以外的距离，可以表示和其它元素之间的距离，使用margin属性来设置。

margin后面可跟多个值，中间用空格分离，含义如下：

（1）首先我们放置三个盒子，颜色不同，宽高均为100px。

（2）我们给中间的橙色盒子加上一个10px的上外边距，可以看到橘黄色的盒子向下移动了10px，上面多了一个上外边距。

（3）接下来我们去掉上外边距，改成给橘黄色盒子加上一个10px的下外边距，发现橘黄色盒子并没有移动，移动的是下面的黄色盒子，所以margin-top和margin-bottom的用法一定要区分开。

（4）外边距可以是赋值，我们给橘黄色盒子添加一个-50px的上外边距，可以看到橘黄色盒子向上移动了。

（1）我们放置一个大的红色盒子，里面包着一个小的橘黄色盒子，当我们为橘黄色盒子添加了一个50px的上外边距的时候，本来应该只是小盒子多了上外边距然后导致向下移动。结果发现，效果就好像是给大盒子加了上外边距一样，大盒子跟着小盒子一起塌陷下去了，并不是我们想要的效果。

（2）如果大盒子有边框，或者橘黄色盒子上面还有元素，情况会是正常的，可以达到我们想要的效果，不会出现塌陷：

（3）解决方法

在外部元素上面没有边框，其内部上方也没有其它元素挡着的时候，给其子元素设置上外边距，会导致塌陷，达不到想要的效果。目前我们只能在遇到这种情况的时候尽量使用padding去设置，不要使用margin，当然还有很多别的解决方法，就不细说啦。

我们放置两个盒子，给上面的盒子添加一个100px的下外边距，给下面的盒子添加一个50px的上外边距，最终效果如图所示，两个盒子最后中间只隔了100px：

当下方元素的上外边距遇到上方元素的下外边距，是会发生重合效果的，设置的时候一定要注意。

块元素才可以设置上下左右外边距，内联元素设置上下外边距是无效的。

margin属性的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于margin属性4个值顺序、margin属性的信息别忘了在本站进行查找喔。