原文:前端CSS子元素margin-top穿透问题

当我们在给子元素设置margin top后会出现一个现象,子元素与父元素之间没有出现间距,反而是父元素和其他元素之间出现了间距,像是margin top的效果作用在父元素上一样。这种现象就是margin top穿透现象。 如下所示: HTML代码 CSS代码 我们希望的是子盒子的上边距距离父盒子 px,但实际上效果是父盒子距离浏览器的顶线隔开了 px,如下图所示: 经过查找资料和测试发现,发生这 ...

2022-03-09 21:47 1 589 推荐指数:

查看详情

css元素margin-top为何会影响父元素

详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。   问题 ...

Sat Apr 25 01:18:00 CST 2015 2 2389
关于css中父元素元素之间margin-top问题

之前在使用经常遇到下面的问题: html: css: 显示结果: .one与.top之间并没有实现margin-top的效果,这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距 ...

Fri May 19 07:43:00 CST 2017 0 3079
元素元素之间的margin-top问题

元素的盒子包含一个元素盒子,给元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而元素和父元素的边距则没有发生变化。 html代码: <div class="box1"> <div class="box2">< ...

Thu May 05 22:31:00 CST 2016 0 6007
CSSmargin击穿问题元素margin-top会影响父元素

最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑。唉,有些东西不用就忘。 一、问题描述 最终效果:会发现在元素上面会有20px的空白,然而我们并没有对父元素设置margin,可见是元素margin-top ...

Fri May 01 19:12:00 CST 2020 0 803
解决元素设置margin-top,效果到父元素上的问题

有时当我们设置元素margin-top,但是却发现元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果。 这种问题的解决方法如下: 1.给父元素加边框。 2.给父元素设置padding-top来代替给元素设置margin-top。 3.内容生成(推荐)。代码 ...

Wed Oct 12 22:10:00 CST 2016 0 2057
元素设置margin-top后,父元素跟随下移的问题

元素设置margin-top后,父元素跟随下移的问题 div没有margin-top:30px,但是页面上显示的结果确是像margin-top应用到了div上一般,div下移而p没有。 原因是因为 当一个元素包含在另一个元素中时,假设没有内边距padding或边框border把外边距 ...

Mon Feb 20 19:06:00 CST 2017 0 6208
解决元素设置margin-top,效果到父元素上的问题

原因:元素和父元素的上边框重合 前端开发在重构页面的时候,子集需要按照设计图来设计尺寸 有的时候给元素设置margin-top 元素没有效果,反而父元素起到了 margintop效果,原因就是元素和父元素上边框重合在一起 解决办法   1为父元素设置内边距 ...

Wed Apr 17 02:04:00 CST 2019 0 1909
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM