CSS - 外边距

  1. 通常我们都用简写
  2. 没有外边距时
  3. 实现左右居中

  • 作者：KK

  • 发表日期：2016.1.26

*提示:这是了解盒模型的起步章节,务必学会盒模型相关的知识点

控制外边距的属性是margin,下面有一个400*400像素的绿色区域,我们通过margin-top属性让它偏离了body顶部一段距离

<body>
<div style="width:400px; height:400px; background:green; margin-top:38px;">
这是一个绿色的区域,距离父容器顶部38个像素
</div>
</body>

然后margin-left则是距离左边偏移:

<body>
<div style="width:400px; height:400px; background:green; margin-top:38px; margin-left:38px;">
这是一个绿色的区域,距离父容器顶部和左边37个像素
</div>
</body>

到margin-right:

<body>
<div style="width:300px; height:300px; background:green; float:left; margin-right:38px;">
我是第1个div,左浮动,下一个跟在我右边,距离38像素,设置我通过margin-right设置了外边距
</div>
<div style="width:100px; height:300px; background:red; float:left;">
我是第2个div
</div>
</body>

其实margin还可以用负数,比如 margin-right:-20px 你自己试下效果吧~

再来margin-bottom:

<body>
<div style="width:300px; height:200px; background:green; margin-bottom:22px;">
我是第1个div,下一个div会在我下面距离22像素之后出现
</div>
<div style="width:100px; height:100px; background:red;">
我是第2个div
</div>
</body>

通常我们都用简写

上面通过margin-left,margin-top,margin-right,margin-bottom一共4个属性来控制不同方向的边距,但我们更加经常会用得到简写方式,就是只写margin这个属性名称而已,比如

margin:20px;表示上下左右所有东西都要距离自己20像素

margin:10px 20px;表示上下外边距为10像素,左右外边距为20像素

margin:10px 20px 30px;表示上面外边距为10像素,左右外边距为20像素,下面外边距为30像素

margin:10px 20px 30px 11px;表示上面外边距为10像素,右外边距为20像素,下面外边距为30像素,左外边距为11像素

没有外边距时

有时候我们需要声明一个东西是没有外边距的,那你可能会想到用margin:0px;用0像素来描述,这样是可以的,那不如还可以写成margin:0cm;这样说用0厘米呢?不都是一样效果吗

其实既然是没有任何距离,都是没有嘛,直接用0就可以啦,不用写单位的哦!----margin:0;

实现左右居中

margin属性除了用来做外边距控制外,还有一个经典的用途就是实现左右居中,书写方式是:margin:0 auto;,这个含义就是上下没有边距,但左右两边自动设置边距

以下实例代码演示了一个居中的div:

<body>
	<div style="width:500px; height:200px; background:red; margin:0 auto;"></div>
</body>

但居中的前提是被居中的标签必须拥有宽高,所以width和height属性我就进行了设置,否则的话,一个div默认是占满父容器的100%宽度的,既然已经跟父容器一样宽度了,还居什么中啊...再居中也是一样的宽度和位置呀是不是

另外div默认是根据内容变出高度的,由于上面演示的div没有内容,所以我加了个height属性定义高度

margin不可以被继承,所以父标签如果有margin,那么子标签不会拥有margin,在另外用选择器单独设置哦!

知识小扩展:其实安卓开发里也有类似CSS这样的东西控制每种控件按钮的浮动位置,边距,颜色等的哦~学会了CSS设置元素样式,以后学其它界面的开发都是思想相通的,只是代码的写法有点不一样,功能有点不一样,优化点不一样而已!