方法一:使用padding替代margin。在某些情况下,如果可以接受元素内部增加一些间距,那么使用padding来代替margin是一个不错的选择。比如,原本想给一个元素的顶部增加20px的外边距,可以考虑给它的父元素增加20px的paddingtop。 方法二:给父元素添加overflow: hidden;这个属性可以解决父元素和第一个子元素之间的margin塌陷问...
初始效果如下图左,设置.box中margin-top:50px后显示如图右,发现设置的效果居然跑到.con盒子了,这种效果就叫做margin-top的塌陷。 解决方法如下 1. 外部盒子设置一个边框,如下 .con{ #需要减去边框的上下左右1px width:298px; height:198px; background-color:gold; border:1px solid gold; } 2. 外部盒子...
流内块级元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为外边距塌陷(margin collapsing)。 导致边距塌陷的原因是外边距,有以下四种情况计算情况: 如果都是正数,则取最大值 如果相同,则取其中之一 如果有正有负,则取最大的正数加上最小的负数之和 如果都是...
(1)外部盒子设置一个边框 (2)外部盒子设置overflow:hidden (3)使用伪元素类: .clearfix:before{ content:””; display:table; } 代码: <!DOCTYPE html>margin-top塌陷.clearfix:before{content:"";display:table;}/*第三种解决塌陷的方法,相当于第一种加了边框 第三种方法是最常用的方法*/.con{width:300...
CSS中外边距(margin)塌陷 两个嵌套关系的(父子关系)块元素,当父元素有上外边距或者没有上外边距(margin-top),子元素也有上外边距的时候。两个上外边距会合成一个上外边距,以值相对较大的上外边距值为准。 这个时候你就会发现你给父元素设置的margin-top:50px是没有效果的。或者在你需要调整子元素的上边距相对于...
1. 什么是margin塌陷问题。 在标准文档流中,垂直方向的父子元素,当给子元素设置margin-top: 100px时,子元素不会相对父元素顶端距离100个像素,而是父子元素同时相对文档下移100px。或则同时给父子两个元素设置margin-top,但是呈现的效果是谁大,父子元素整体像下移动大的距离(此时子元素还是相对父元素不动)。这两种...
这种外边距塌陷的问题可以说是css中的一个bug。因为这种现象我们通常是需要避免的,也是我们不需要的,因为在页面布局中,使用margin-top通常是希望子元素的顶部相对于父元素的顶部产生一定的距离。比如在使用margin调整子元素相对于父元素居中的时候。那么又应该如何去解决这个问题呢?
CSS--解决margin塌陷(margin-top失效)--实例,当2个垂直外边距相遇时,他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。下述场景会导致margin合并:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们
margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部。 兄弟关系: 1. 同级元素塌陷:上面的元素有下边距,下面的元素有上边距,两个边距相遇,真正盒