码迷,mamicode.com
首页 > 其他好文 > 详细

margin-top失效解决办法

时间:2020-04-29 23:40:11      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:inf   http   图片   实现   img   code   多少   hid   mamicode   

技术图片技术图片

 

 需要实现如下效果

技术图片

 

 如果仅仅在.small里面加 margin-top的话,因为margin-top具有传递性,会传递到父元素上面,导致两个盒子同时向下移。

解决办法:1. 子元素加上margin-top后,在父元素上增加overflow:hiden;

       2. 在父元素加上padding-top值,注意加上多少padding-top值,要在父元素的高度上减去。

 

margin-top失效解决办法

标签:inf   http   图片   实现   img   code   多少   hid   mamicode   

原文地址:https://www.cnblogs.com/yysn/p/12805515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!