• 目录

盒子模型:padding

阅读量: 356 编辑

盒子模型:padding

(div)标签与里面的标签的内边距离

  • padding:10px; 四个内边距都是 10 像素

  • 也可以这样写 padding-top、padding-right、padding-bottom、padding-left

  • padding:10px 20px 30px 40px; 上、右、下、左

  • padding:10px 20px; 上下、左右

代码实战

代码的详细解读,可以参考视频教程。

新建 html 文件 11-padding.html ,编写下方程序,运行看看效果吧


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子模型padding</title>
        <style type="text/css">
            .out-div{
                width: 200px;
                height: 200px;
                background-color: sandybrown;
                /**
                padding-left: 20px;
                padding-top: 20px;
                padding-right: 20px;
                padding-bottom: 20px;**/
                /**padding:20px;**/
                /**padding:20px 30px 40px 50px;**/
                padding:10px 20px;
            }
            .in-div{
                width:200px;
                height:200px;
                background-color: silver;
            }
        </style>
    </head>
    
    <body>
        <div class="out-div">
            <div class="in-div"></div>

        </div>
    </body>
    
</html>

  • 目录