学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(十三) 内边距padding

发布时间:2020-01-09点击:

    一、padding介绍

    在CSS的盒子模型中,padding是一个很重要的元素属性,它设置的是标签元素的边框与内容之间的距离,我们常常叫做内边距,也叫填充。使用margin可以设置四周的内边距,也可以使用相应的单边属性去设置。

    二、padding可以设置的值

    1、auto(设置浏览器边距,具体需要看浏览器);

    2、像素值,比如说10px   5em,均可以;

    3、百分比值,比如果10%

    PS:padding的值可以是负值,表示与正值相反方向。

    三、设置单边值

    在padding的实际运用中,很少直接使用padding属性,因为其设置的是一个标签元素的四周,这样不好操控,以便实际使用的都是其某一边的值:

    1、padding-top:设置上外边距;

    2、padding-right:设置右外边距;

    3、padding-bottom:设置下外边距;

    4、padding-left:设置左外边距;

    也可以使用其简写属性:

    padding:100px;    /*表示上下左右内边距均为100px*/
    padding:100px 50px;    /*表示上下为100px 左右为50px*/
    padding:100px 50px 80px;    /*表示上内边距为100px 右为50px 下为80px*/
    padding:100px 50px 60px 80px;    /*表示上为100px 右为50px 下为60px 左为80px*/

    四、属性一览

    序号
    属性
    描述
    1
    padding
    简写属性,设置内边距
    2
    padding-top
    设置上内边距
    3
    padding-right
    设置右内边距
    4
    padding-bottom
    设置下内边距
    5
    padding-left
    设置左内边距

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: