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

一、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	设置左外边距


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