盒子模型：padding

盒子模型：padding

（div）标签与里面的标签的& #x5185; & #x8FB9; & #x8DDD; & #x79BB;

• padding:10px; 四个内边距都是 10 像素
• 也可以这样写 padding-top、padding-right、padding-bottom、padding-left
• padding:10px 20px 30px 40px; 上、右、下、左
• padding:10px 20px; 上下、左右

代码实战

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

&
    lt;
    !DOCTYPE html&
    gt;
    
&
    lt;
    htmllang=&
    quot;
    en&
    quot;
    &
    gt;
    
    &
    lt;
    head&
    gt;
    
        &
    lt;
    metacharset=&
    quot;
    UTF-8&
    quot;
    &
    gt;
    
        &
    lt;
    metahttp-equiv=&
    quot;
    X-UA-Compatible&
    quot;
    content=&
    quot;
    IE=edge&
    quot;
    &
    gt;
    
        &
    lt;
    metaname=&
    quot;
    viewport&
    quot;
    content=&
    quot;
    width=device-width, initial-scale=1.0&
    quot;
    &
    gt;
    
        &
    lt;
    title&
    gt;
    &
    #x76D2;
    &
    #x5B50;
    &
    #x6A21;
    &
    #x578B;
    padding&
    lt;
    /title&
    gt;
    
        &
    lt;
    styletype=&
    quot;
    text/css&
    quot;
    &
    gt;

            .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;

            }
    
        &
    lt;
    /style&
    gt;
    
    &
    lt;
    /head&
    gt;
    
  
    &
    lt;
    body&
    gt;
    
        &
    lt;
    divclass=&
    quot;
    out-div&
    quot;
    &
    gt;
    
            &
    lt;
    divclass=&
    quot;
    in-div&
    quot;
    &
    gt;
    &
    lt;
    /div&
    gt;
    

        &
    lt;
    /div&
    gt;
    
    &
    lt;
    /body&
    gt;
    
  
&
    lt;
    /html&
    gt;
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！