盒子模型：padding

鹤川

发布于 2023-04-27 15:45:58

3600

发布于 2023-04-27 15:45:58

文章被收录于专栏：鹤川博客鹤川博客

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023 年 04 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html