安庆市建设办事处网站,药品在网站上做标签有哪些分类,wordpress制作列表页,wordpress国主题公园【CSS】margin塌陷和margin合并及其解决方案 一、解决margin塌陷的问题二、避免外边距margin重叠#xff08;margin合并#xff09; 一、解决margin塌陷的问题
问题#xff1a;当父元素包裹着一个子元素且父元素没有边框的时候#xff0c;当给子元素设置margin-top:100pxmargin合并 一、解决margin塌陷的问题
问题当父元素包裹着一个子元素且父元素没有边框的时候当给子元素设置margin-top:100px此时不应该看到的是子元素距离父元素顶部100px嘛为什么是父元素距离body100px? 原因父元素与子元素之间且父元素没有边框给子元素添加margin-top属性时此时只是想让子元素的边框距离父元素边框有一段距离而却出现了父元素的顶端距离body这个边框出现了位移这就是margin-top塌陷的现象。 .container{height: 300px;width: 300px;background-color: blue;/* overflow: hidden; */}.box {background: red;height: 100px;width: 100px;margin-top: 50px;}div classcontainerdiv classbox/div/div解决方案给父元素添加overflow:hidden触发BFC; .container{height: 300px;width: 300px;background-color: blue;overflow: hidden; }二、避免外边距margin重叠margin合并
问题两个兄弟块元素一个设置下外边距100px一个设置上外边距100px此时它们不应该是相距200px才对嘛为什么只相距了100px 原因兄弟之间的元素垂直方向的margin-bottom和margin-top会合并为单个边距其大小为单个边距的最大值如果值一样则值仅为其中一个。这就是外边距重叠现象。 .box {background: red;height: 100px;width: 100px;}div classbox stylemargin-bottom: 100px;/divdiv classbox stylemargin-top: 100px;/div解决办法每个元素放置不同的BFC中通过overflow: hidden;触发BFC .container {overflow: hidden;}.box {background: red;height: 100px;width: 100px;}div classcontainerdiv classbox stylemargin-bottom: 100px;/div/divdiv classcontainerdiv classbox stylemargin-top: 100px;/div/div
