关于margin和padding使用出现的问题。。

关于margin和padding使用出现的问题。。

在wrap盒子里面他的第一个元素使用margin-top:的话总是会把真个屏幕向下顶这是为什么?使用padding-top:就不会。或者在父元素wrap上添加overflow:hidden也不会这什么原因老师?

http://img1.sycdn.imooc.com//climg/5e8d874b09d1a30a17960837.jpg

http://img1.sycdn.imooc.com//climg/5e8d874b0950e97e17730819.jpg

如图http://img1.sycdn.imooc.com//climg/5e8d86e1095ede2a18350815.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,html结构如下吗(两个元素为父子结构)?
http://img1.sycdn.imooc.com//climg/5e8d9b9709d502ae05120707.jpg

是如果是的话,那么是发生了margin传递。可以参考下方理解。在一个父子元素结构里,如果子元素设置了margin-top值 会出现一个问题,就是子元素的margin-top会作用到父级元素。建议:给父级设置overflow: hidden;即可解决。

如果不是上方的结构,可以把完整的代码粘贴上来,老师帮助解答。祝学习愉快~

提问者 功不唐捐终入海 2020-04-08 16:12:48

我的代码部分是这样的:

/* 第五屏 */

.screen-5{

    height:640px;

    background:url('../img/sc5.jpg') center;

    background-size:cover;

}

.screen-5_wrap{

    width:1200px;

    margin:0 auto;

    /* overflow:hidden; */

}

.screen-5_bg{

    width:200px;

    height:200px;

    background:url('../img/sc5-1.png')no-repeat center;

    padding-top:95px;           /* 改成padding-top:95px就不会突出一块 */

}

.screen-5_heading{

    font-size:40px;

    padding-top:53px;

    padding-bottom:61px;

}

.screen-5_subheading{

    font-size:17px;

}



  • 提问者 功不唐捐终入海 #1
    图片分别为第一张:设置为padding的时候 第二张:设置为margin但父元素设置hidden时 第三张:设置为margin的时候。
    2020-04-08 16:15:28
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师