li那里是用margin，在内容边框里面不是用padding吗，为什么ul那里用padding就可以
来源：3-6 编程练习
慕标0359786
2019-12-12 14:47:58
<!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:80px;
padding-left:40px;
}
li{
width:200px;height:50px;background-color:yellow;
/*样式补充*/
margin-top:40px;
margin-left:40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<ul>
<li >HTML</li>
<li >CSS</li>
<li >JavaScript</li>
</ul>
</body>
</html>写回答
1回答
-
同学你好，代码编写的不错，
1、ul那里用padding也是可以的，表示设置li与ul的距离。
2、代码还有点小问题，这里ul的padding-top是指ul里的内容也就是li距离ul的距离，在同学的代码中ul中设置了 padding-top:80px，这说明ul里的内容也就是li距离ul的距离为80px，如：
而同学在li中设置margin-top：40px是指容器本身的顶部距离其他容器的距离，在li中设置了margin-top:40px这说明li距离ul的距离又加了40px，所以最终为120px，题目的效果是不同的。
所以这里要将ul中设置了 padding-top:80px修改为： padding-top:40px，这样就可以保证最终距离顶部为80px。
同理，根据左边距为40px，所以这里可以不需要设置ul与li的左内边距 padding-left:40px;，只需要保留li的margin-left:40px;就可以啦。
修改后的代码如下：
<!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; } li{ width:200px;height:50px;background-color:yellow; /*样式补充*/ margin-top:40px; margin-left:40px; margin-bottom: 40px; } </style> </head> <body> <ul> <li >HTML</li> <li >CSS</li> <li >JavaScript</li> </ul> </body> </html>如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题