div.list2的长宽值问题

div.list2的长宽值问题

我在按照视频设置list2样式时(除了course里width设置的的300其余都一样),未加margin和padding前div是300*41,加上margin:0 15px后div是270*41,加上padding:10px 5px 5px 5px后是270*56,而不是280*56,这个怎么解释呢

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>应用</title>
<style type="text/css">
body,div,p,span{margin: 0;padding: 0;font-family: 微软雅黑}
.course{width:300px ;;margin: auto;background:#ECECEC;}
.list1{height:140px;background: black ;padding-top: 60px}
.list1 p{color: white;text-align: center;font:20px bold;
}

.list2{border-bottom:solid 1px #93999f;margin:0 15px;padding:10px 5px 5px 5px ;line-height: 1.5em;font-weight: bold}
.list2 span{font-size: 12px;color: #93999f}

</style>
</head>
<body>
<div class="course">
<div class="list1">
<p><span>前端课程排列</span></p>
<p><span>前端课程排列</span></p>
</div>
<div class="list2">
<p>HTML+CSS基础课程</p>
<span>466609人在学</span>
</div>
<div class="list2">
<p>HTML+CSS基础课程</p>
<span>466609人在学</span>
</div>
<div class="list2">
<p>HTML+CSS基础课程</p>
<span>466609人在学</span>
</div>
</div>
</body>
</html>


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

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

2回答
小丸子爱吃菜 2017-07-17 18:31:25

给.list设置一个固定的宽度就可以了,元素如果没有宽度,会受margin和padding值的影响,它的宽度也不会固定。

祝学习愉快!

樱桃小胖子 2017-07-16 20:43:18

亲,建议你把代码贴过来,以便于大家更好的发现问题并且帮助你解答~

  • 提问者 weibo_飞来云去_0 #1
    已重新编辑了问题,就是对div标签的宽高变化有点疑惑
    2017-07-17 15:16:06
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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