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

搜索

首页>>网站建设>>Javascript>>经验笔记

CSS基础教程(十二) 外边距margin

发布时间:2020-01-08 点击:47

    一、margin介绍

    如上图,margin设置的边框外面的距离,margin是没有背景颜色的完全透明,但是它常常被用来设置与其他元素之间的距离,以此来达到排版的目的。

    二、margin值

    在margin中可以设置的值有

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

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

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

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

    三、设置某一边margin值

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

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

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

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

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

    也可以使用其简写属性:

    margin:100px;    /*表示上下左右外边距均为100px*/
    margin:100px 50px;    /*表示上下为100px 左右为50px*/
    margin:100px 50px 80px;    /*表示上外边距为100px 右为50px 下为80px*/
    margin:100px 50px 60px 80px;    /*表示上为100px 右为50px 下为60px 左为80px*/
    PS:其属性设置的顺序是顺时针方向。

    四、属性一览

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

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

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

相关链接

搜索

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