为什么注释了padding-top之后，原列表上方会有空白呢？
来源：3-6 编程练习
一只大猪蹄
2019-11-15 11:00:17
/*为什么li当中的margin-top属性同时对ul造成影响了呢？没加padding-top之前，粉红色与黄色一块往下移动，加了pading-top之后，粉红色方块上面没空白，而且黄色Html块跟上方的距离等于两者距离之和*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin外边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style:none;
width:300px;
height:400px;
background-color:pink;
/* padding-top:40px;*/
box-sizing: border-box;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-left: 40px;
margin-top: 40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
1回答
-
好帮手慕阿满
2019-11-15
同学你好，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。也就是说，如果ul没有设置padding-top，或者border-top，ul的上边距就会和li的上边距重合，造成列表上方有空白。
想要去除这种影响，可以给ul设置padding-top或者border-top即可。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
0
相似问题