盒子模型：padding

2023-04-27 15:45:58 浏览数 (2)

盒子模型：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 ，编写下方程序，运行看看效果吧

代码语言：javascript复制
<!DOCTYPE html>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>盒子模型padding</title>
        <styletype="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:10px20px;
            }
            .in-div{
                width:200px;
                height:200px;
                background-color: silver;
            }
        </style>
    </head>
  
    <body>
        <divclass="out-div">
            <divclass="in-div"></div>

        </div>
    </body>
  
</html>
html padding width 程序 模型

0 人点赞