CSSpadding（内边距）

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都定制网站,高端网页制作,对成都人造雾等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业成都网站推广优化,H5建站,响应式网站。

• padding-top：设置元素内容区上方的内边距；
• padding-right：设置元素内容区右侧的内边距；
• padding-bottom：设置元素内容区下方的内边距；
• padding-left：设置元素内容区左侧的内边距；
• padding：内边距属性的缩写形式，可以同时设置上下左右四个方向上的内边距。

上述属性的可选值如下表所示：

定义各个方向上的内边距

您可以使用 padding-top、padding-bottom、padding-left 和 padding-right 属性来分别设置元素上下左右四个方向上的内边距。

【示例】分别定义元素上下左右四个方向上的内边距：

    


    

        padding-top: 10px;

        padding-bottom: 2em;

        padding-left: 1cm;

        padding-right: 3ex;
    

运行结果如下图所示：

内边距简写形式

padding 属性是其余四个属性的简写形式，在实际开发中我们使用最多的也是这个简写属性。与 margin 属性相似，paddiing 属性同样可以接受 1~4 个参数（参数之间使用空格分隔）：

• 如果提供四个参数，那么将按照上、右、下、左的顺序依次设置元素四个方向上的内边距；
• 如果提供三个参数，那么第一个参数将用来设置元素上方的内边距，第二个参数将用来设置元素左、右两个方向上的内边距，第三个参数将用来设置元素下方的内边距；
• 如果提供两个参数，那么第一个参数将用来设置元素上、下两个方向上的内边距，第二个参数用来设置元素左、右两个方向上的内边距；
• 如果只提供一个参数，那么这个参数将同时作用于元素四个方向上的外边距。

【示例】使用 padding 属性为元素设置内边距：

    


    

        padding: 10px 3ex 2em 1cm;
    

运行结果如下图所示：