首页>前端教程>CSS教程

CSS第五课:margin外边距、padding内边距详解

今天32G的U盘掉了,其实优盘无所谓,关键是里面满满的教学资料,好多新内容还没有备份到电脑上,好心塞!

一点幽默的开头语都想不出来了,直接进入正题吧。

一、认识谷歌浏览器“审查元素”中的盒模型。

margin、padding、border盒模型.png

查看一个元素,只需要看这个图,你就应该知道该对象有这几个属性值:

1、宽高(336px*114px)

2、padding:3px

3、border-width:1px

4、margin-bottom:10px

border上一节课已经讲解了,这节课来认识一下margin和padding两个非常关键的属性。

二、padding内边距

<div id="main">
    文本
</div>
#main{
	width:300px;
	border:1px solid #000;
	background-color:#fff;
	}

没有内边距的时候,文字顶着墙壁,好难受!

没有padding的时候.png

所以我们需要留白来透透气,让视觉舒服一点。

#main{
	width:300px;
	border:1px solid #000;
	padding:20px;/*四边都一样的内边距,20px*/
	background-color:#fff;
	}

四边padding一样的时候.png

蓝色边框是border,文字是内容,border和文字之间的间隔就是内边距。换句话说,如果border是墙壁的话,那么内边距就是墙壁和家具之间的缝隙,是房子内部的距离。

当然,padding的值可以有四个,分别为:

padding-top /*上内边距*/

padding-right/*右内边距*/

padding-bottom/*下内边距*/

padding-left/*左内边距*/

可以单独定义任意一边的内边距,不过,我们大部分都是用padding来简写。

padding:上 右  下 左;

从上开始,顺时针方向。

比如:

padding:10px 20px 30px 40px;/*上 右 下 左内边距*/

四边padding值不一样的时候.png

padding:10px 20px 30px;/*上 左右 下内边距*/

三个padding值的时候.png

padding:10px 20px;/*上下 左右内边距*/

两个padding值的时候.png

记住顺时针方向,很容易搞定。

所以,padding是让容器的边边和内容之间产生留白,就好像书本的页边距一样。适当的留白可以让视觉很舒服,不至于拥挤。

三、margin外边距

如果padding是房子内部的距离,那么margin就是房子和房子之间的过道了。

margin.png

1和2两个容器要产生间隔,这属于两个容器之间的距离了,是外部的间隔,所以要用margin才能解决。

margin-bottom.png

为上面的容器添加了margin-bottom:10px的代码,实现了间隔。

margin的语法结构和padding一模一样,需要明白的是以border为墙壁,padding是border以内,容器和自身内容的间距。margin是border以外,容器和容器之间的间隔。

margin-top /*上外边距*/

margin-right/*右外边距*/

margin-bottom/*下外边距*/

margin-left /*左外边距*/

简写的方法和padding一样,这里不再累述。

四、小技巧

1、margin的值除了正值以外,还可以是负值,还可以是auto。

为一个固定宽度的div做相对于浏览器居中对齐,可以使用如下代码:

#main{
	width:300px;
	border:1px solid #000;
	padding:20px;
	background-color:#fff;
	margin:20px auto;/*相对于浏览器上下外边距为20px,左右自动*/
	}

相对于浏览器居中对齐.png

浏览器的宽度是不固定的,有1024、1280、1440、1920等各种大小的浏览器,但是div的宽度固定了,这样就能计算剩余的宽度,让左右外边距自动平分,就可以实现居中对齐了。

2、当容器不浮动的时候,上下两个容器都设置了margin值,则margin值会产生重叠。比如上面一个容器有margin-bottom:20px,下面容器有margin-top:30px;则这个时候的margin值取大的那个值,而不是两个值的叠加。

所以,设置margin的时候,能单方向设置最好,还有能够用padding解决的间隔,就不要用margin。

3、当容器浮动的时候,设置了margin-left的值,则在IE6中第一个浮动对象的左外边距会加倍,只需要添加display:inline则可以解决。不过现在IE6几乎已经不使用了,知道这个bug可以避免在浮动的时候设置左外边距。

查看案例

点赞


6
保存到:

相关文章

Top