HTML中margin重合问题

margin重合有同向重合和异向重合，主要是块级元素的上下方向重合

什么是同向重合和异向重合

同向重合:

两个块级元素的margin在同一方向重合，这时候重叠之后的margin值由发生重叠的元素的margin最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。
异向重合，即margin-bottom和margin-top重合，此时margin的值由发生重叠的元素中margin的值较大的决定。

示例与解决办法

父元素与子元素的同向重合

HTML代码

 <div class="parent"><div class="child"></div></div>

CSS

.parent {width: 100px;height: 100px;background: rgb(15, 10, 10);margin-top: 20px;}.child {width: 80px;height: 80px;margin-top: 100px;background: rgb(101, 177, 51);}

效果图

通过浏览器的检查工具发现

很明显，元素到顶部的距离就是子元素的margin-top的值，这就是同向重合

之前为了效果明显，子元素margin-top值过大，此处调为50px

解决办法也很简单，只需要给父元素加 overflow：hidden 属性即可

解决后的效果图

其他办法

给父元素最外层添加1元素边框或者1元素的padding，1px对项目影响不大

效果图

父元素与子元素的异向重合

解决办法与同向一样

兄弟元素的异向重合

HTML代码

<div class="box"><div class="one"></div><div class="two"></div>
</div>

CSS

 .one,.two {width: 100px;height: 100px;}.one {background: #000;margin-bottom: 50px;}.two {background: #0a0;margin-top: 20px;}

效果图

由CSS可以得到整个box的高度应该是270px,但是却只有250px，这是因为两个块级元素产生了异向重合，选择了margin值大的作为了间隔

解决办法

给两个字元素添加 float：left 属性或者使用其他脱标方法

 .one,.two {width: 100px;height: 100px;float: left;clear: both;}

效果图

这里由于脱标后，父元素没有高度，没被撑开，可以自己设置高度观察，检查工具刚好挡住信息，就不贴图了

HTML中margin重合问题相关推荐

HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
css盒模型中margin很牛逼
css盒子模型,说简单也简单,用的时候也有不简单的. 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding.border.甚至定位.这在布局上很有用,要注意. ----- ...
html怎么设置左偏移量,CSS中margin属性的偏移量详解（代码示例）
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
html5中margin是什么意思,css中margin是什么意思，margin作用是什么？
一.介绍,什么意思? margin为对象外边距间隔属性.如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距. margin作用: 设置对象与其它对象的外边距 ...
C语言margin的作用是,css中margin是什么意思，margin作用是什么
一.简介,甚么含义? margin为对象外边距间隔属性.假如对一个对象比方div配置了边框后,再设置margin就会察看到这个div外面孕育发生了间距边距. margin感导: 设置对象与此外对象的外 ...
html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因对于初学者来说,可能会经 ...
html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

HTML中margin重合问题

HTML中margin重合问题

什么是同向重合和异向重合

示例与解决办法

父元素与子元素的同向重合

父元素与子元素的异向重合

兄弟元素的异向重合

HTML中margin重合问题相关推荐

最新文章

热门文章