css中的margin属性(以下关于css属性margin的值,哪些是正确的)

【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：

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

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

css样式margin

margin 外边距（标签与标签之间的距离）

margin的四个方向

margin-top 上边距

margin-right 右边距

margin-bottom 下边距

margin-left 左边距

margin的复合样式

一个值 四个方向的margin值都一样

两个值 第一个值代表上边和下边的margin值，第二个值代表右边与左边的margin值

三个值 第一个值代表上边的margin值，第二值代表右边与左边的margin值，第三个值代表下边的margin值

四个值 第一个值代表上边的margin值，第二个值代表右边的margin值，第三个值代表下边的margin值，第四个值代表左边的margin值

margin的问题

margin的问题

1、margin的传递（只会上下传递不会左右传递）

子级会把自己的margin-top与margin-bottom传递给父级

解决办法：给父级加上一个边框（其中一个办法）

2、margin上下叠压（只有上下会叠压，左右不会叠压）

上边元素的margin-bottom与下边元素的margin-top叠压在了一起（他会取大的值）

解决办法只给上边的元素设置margin-bottom或只给下边的元素设置margin-top就可以了

auto 自动

margin-left：auto； 元素居右显示

margin-right：auto； 元素居左显示

元素水平居中显示

margin：auto；

CSS理解之margin

margin重叠通常特性：

margin重叠三种情况：

demo 1:

1.相邻兄弟元素margin重叠

兄弟元素的上下margin发生了重叠

2.父级和第一个/最后一个子元素

demo 1:

inline元素（内联元素，像图片、文字这样的东西）

块状格式化上下文元素（BFC元素）

同样可以利用父子margin重叠条件来去除margin重叠：

demo 2：

demo 2 :

demo 2:

去掉margin-bottom重叠与上面类似。

3.空的block元素margin重叠：

空的block元素发生margin重叠，也需要一些条件限制：

去掉空的block元素的margin重叠也是利用上面的条件：

3.margin重叠的计算规则：

1、正正取大值：

2、正负值相加：

3、负负最负值（取绝对值大的）：

首先理解margin atuo的作用机制 ，先看一些事实例子：

1.元素有时候，就算没有设置width或height，也会自动填充外部容器

例1:

例2：

以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。

若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。

总之一句话，auto就是用来分配。

通过以上的例子，很多事情就很好理解了，比方说：

1.为什么图片设置了 margin：0 auto 不水平居中？

如上图，设置了 margin auto ，图片为什么还是不居中呢？

因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足 margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。要想让它居中也很简单：

2.为什么明明容器定高，子元素也定高了， margin auto 0 无法垂直居中?

上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？

因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？很显然不满足，也就没有剩余空间，所以设置 height:100px margin auto 不会垂直居中。

还需要注意一点：用 margin:auto 来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置 margin：auto 它是不居中的。

那么如何实现垂直方向上的剧中呢，方法很多不止一种：

1.writing-mode与垂直居中：

更改流为垂直居中之后，内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。

2.绝对定位元素实现垂直居中：

子元素设置了 top:0;right:0;bottom:0;left:0; 之后，没有设置宽高，absolute元素也自动填满了容器。

1.margin负值下的两端对齐（主要利用了margin可以改变元素尺寸这一特性：正直变小，负值变大）

由于 div class="ul"/div 没有设置宽度，所以设置了 margin-right:-20px; 后，改变了它的宽度，增大了20px，变为1220px。这时我们再把 li 的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。 主要利用了margin负值增加它的空间 。

demo：

可以看出它的垂直方向是没有margin的，是无效的。

2.第二种常见的无效是margin重叠，比如你设置了margin-top当发现没有效果，这就是margin重叠带来的影响。

3.display:table-cell与margin

demo:

可以看出设置的margin是无效的。

但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。

4.position：absolute与margin，绝对定位元素非定位方向的margin值 “无效” ，定位方向的margin值是有效的。

css的属性中有margin-after吗

css的属性中有margin-after。margin是一个简单的CSS属性，该marginCSS属性在CSS常用的添加元素周围的空间。margin简写属性在一个声明中设置所有外边距属性，该属性可以有1到4个值。

css代码中 margin:auto 和 margin:0 auto 有什么区别？

一、区别

1、参数详解

margin:auto = margin:auto auto auto auto;

margin:0 auto = margin:0 auto 0 auto;

margin:n m p q表示该元素上外边距为n，右外边距为m，下外边距为p，左外边距为q，即 margin:上 右 下 左 ，逆时针一圈。

2、实例说明

margin后面是有4个参数的。

例如：margin:1px 2px 3px 4px，分别表示 上（1px）、右(2px)、下(3px)、左(4px)。

margin后面如果只写2个参数的。

例如：margin：1px 2px

那么这是代表 上下都为1px 左右都为2px。

扩展资料

1、margin 0px auto属性规则

margin:0px auto代表对象上下间隔为0px，左右间隔根据对象宽度自适应。

margin:0px auto简写：可以去掉0后面的px单位，一般CSS代码中如果值为0，那可以不用跟html长度单位。

margin;0px auto或margin:0 auto作用：常用于让DIV布局居中,起到让布局居中作用。

2、margin:auto属性说明

margin:auto时浏览器计算外边距,当margin定义为auto时,将占用可用空间或0px 。

margin:auto时浏览器会自动分配左右边距，使元素平均分配占用父级容器的左右边距，达到元素居中的目的

3、CSS中auto元素

定义auto元素，因元素类型和上下文而异。在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。

4、margin的兄弟属性padding

margin属性是外边距，而padding属性是内边距。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。