欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端二十八:padding的使用以及赋值

程序员文章站 2024-01-04 17:04:28
...
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style>
        .father{
            border:1px solid #000000;
            width:200px;
            height: 200px;
            margin: 0 auto;
            /* padding: 10px; 为盒子的上下左右分别填充10px */
            /* padding: 50px 40px 30px 20px ; 会将盒子按上,右,下,左的顺序分别给盒子设置填充50(上), 40(右), 30(下), 20(左)*/
            /* padding: 50px 40px ; 会将盒子的上下设置为50, 左右设置为40*/
            padding:50px 40px 30px; /* 会将盒子的上设置为50 左,右设置为40 下设置为30*/
        }

        .son{
            border:1px solid #000000;
            width:100px;
            height: 100px;
        }
    </style>
<body>
    <div class="father">
    这是
        <div class="son">
            
        </div>
    </div>
</body>
</html>

 

上一篇:

下一篇: