今天写前端代码发现了maigin属性与padding属性,有些遗忘,故查找资料整理一下,特此分享。
一.margin
<div style="margin:20px 0;"> </div>
看见一个div使用了样式margin,但是这里的20px 和 0 ,不清楚到底是上下左右哪个外边距,有时会有4个,有时有2个,有时3个,有时4个,容易搞不清,下面例子详细解说:
1.定义和用法
margin表示外边距
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
2.说明
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
注释:允许使用负值。
例子 1
4个:分别为上右下左顺时针
margin:10px 5px 15px 20px;
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
例子 2
3个:分别为上,左右一致,下
margin:10px 5px 15px;
- 上外边距是 10px
- 右外边距和左外边距是 5px
- 下外边距是 15px
例子 3
2个:第一个为上下一致,第二个左右一致
margin:10px 5px;
-
上外边距和下外边距是 10px
-
右外边距和左外边距是 5px
例子 4
1个:四个都是一样的
margin:10px;
- 所有 4 个外边距都是 10px
3.实例
设置p元素的4个外边距
<html>
<head>
<style type="text/css">
p.margin {
margin: 2cm 4cm 3cm 4cm
}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。上外边距为2cm,右外边距4cm,下外边距3cm,左外边距为4cm。</p>
<p style="margin:50px">这个段落有直接写在元素里的maigin,上下左右都是50px。</p>
</body>
</html>
3.margin可能的值
值 | 描述 |
---|---|
auto | 浏览器计算外边距。基于浏览器的自动适应 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
二. padding
padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。
padding的简写等同与maigin。