2-13编程练习中的问题

2-13编程练习中的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-13</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.page{
width: 80%;
height: 500px;
margin:50px auto;
}
.top{
width: 100%;
height: 65%;
background-color: #96cdcd;
box-sizing: border-box;
}
.top img{
padding-top: 5%;
}
.bottom{
width: 100%;
height: 35%;
background-color: pink;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="page">
<div class="top">
<img class="top_l" src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
<img class="top_r" src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
</div>
<div class="bottom">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>

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

请问老师给top中的img设置的padding-top:5%;这个5%是相对于哪个元素来说的,希望老师指点一下

正在回答 回答被采纳积分+1

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

3回答
好帮手慕糖 2017-11-13 09:53:17

你好,这个是有你父级的宽度决定的哟,你可以大概根据父级的宽度来计算一下哟,因为父级的宽度是百分比,我们使用的设备不同,分辨率不一致,看到的效果可能会有差别,建议:可以自己来计算下哟。

祝学习愉快~

好帮手慕糖 2017-11-12 17:23:47

你好,这不是蓝色的顶部了么,若没有padding-top:5%;就紧贴顶部了,你可以去掉看下效果。

祝学习愉快~

  • 提问者 hunmix #1
    QAQ可是这不止5%吧 宽太多了
    2017-11-12 19:02:19
怎么都被占用了呢 2017-11-10 18:25:04

百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)。祝学习愉快!

  • 提问者 hunmix #1
    img的父元素是top,padding-top:5%;应该是距蓝色div容器的顶部5%,为什么显示效果却并不是这样的,图贴在上面了
    2017-11-10 20:23:54
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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