《css秘籍》-第七章-上（margin、padding）_html/css_WEB-ITnose

• padding是指与其边框线之间的空间
• border是指盒子周边的直线
• background-color是用来填充边框内部空间的
• margin是指一个标签和另外一个标签之间的间隔。

默认是这样的，但是由于不同的浏览器会给相同的标签提供不同的padding和margin，因此最好将所有标签的padding和margin都置零

用margin和padding控制空间

padding是在内容和边框之间增加空间，padding占用的空间也可以为空白内容，但他仍然会填满背景色或者图片，margin则是在元素之间增加空白，所有有时候看到增加margin之后，会多了空白的沟槽。

margin可以用百分比进行布置，例如

< !DOCTYPE html>            

假设这个div就是在html的body的一个div，这样的话这个div会始终保持增加距离浏览器左边%20的间距和距离浏览器右边%20的间距。这种做法很适合在做一些适配浏览器尺寸的操作。

margin和padding可以使用快捷属性：

例如

margin: 0 10px 20px 30px;

这个配置的参数从左到右是，上边，右边，下边，左边的margin。

快捷方式很方便设置4个方向的值。

边距冲突

当元素的margin-bottom碰到另外一个元素的margin-top的时候，浏览器并不是将他们相加，而是应用他们中较大的一个。这时候就会很奇怪，所以应该使用padding-top或者padding-bottom。

margin负值

margin的正值是增加元素之间的空间，而负值是移除他们之间的空间。所以通过设置margin的负值可以很简单的将元素移动到想要的位置。

未经允许不得转载：神一样的少年 » 《css秘籍》-第七章-上（margin、padding）