3-18这样对吗？总感觉怪怪的，感觉padding和margin有些混乱，请老师给出需要纠正的地方

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin外边距</title>
        <style type="text/css">
            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-bottom:40px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

一枚枚 2017-10-27

源自：盒子模型 3-29 盒子计算

收起

1回答

蜘蛛超人 2017-10-27 23:12:48

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin外边距</title>
        <style type="text/css">
            ul{
                list-style:none;width:300px;height:400px;
                background-color:pink;
                padding-top:40px;
            }
            li{
                width:200px;height:50px;background-color:yellow;
                /*样式补充*/
                margin: 40px 0px;
                
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

如果只用一处，那么给li增加上下各20px就可以达到效果了，不过你的效果也完成没问题。

收起回答