为什么padding-top:40px;后示例图里显示的是80px的距离？

来源：3-6 编程练习

慕桂英4001693

2019-04-18 22:38:20

<!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;
                margin-top:80px;
            }
            li{
                width:200px;height:50px;background-color:yellow;
                /*样式补充*/
                margin-top:40px;
                margin-left:40px;
                
                
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

写回答

1回答

好帮手慕柯南

2019-04-19

已采纳

同学你好！padding-top是指容器内的内容距离容器的顶部的距离，在同学的代码中ul中设置了 padding-top:40px，这说明ul里的内容也就是li距离ul的距离为40px，margin-top是指容器本身的顶部距离其他容器的距离，在li中设置了margin-top:40px这说明li距离ul的距离又加了40px，所以最终为80px，具体布局如图所示：

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

0 学习 · 9666 问题

查看课程

相似问题

css选项和JavaScript选项中间的距离不应该是80px吗？怎么还是40px？

回答 1

li那里是用margin，在内容边框里面不是用padding吗，为什么ul那里用padding就可以

回答 1

为什么不能用

回答 2

我写了超出部分隐藏后为啥两个盒子文字距离上面会多出20px呢

回答 3

打开慕课网App查看更多内容