cssmargin(cssmargins改变行间距)
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是什么意思?
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;”。
【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;