CSS元素外边距：margin属性

CSS 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距可以使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em，也可以直接设置为 auto。
常见的做法是为外边距设置长度值。例如，在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

h1 {margin : 0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

注释：与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。
提示：与内边距的设置相同，设置为百分比数值时，百分数是相对于父元素的 width 计算的。
提示：margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。
但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。
例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。
因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。
当然，只要你特别作了声明，就会覆盖默认样式。

值复制
有时，我们会输入一些重复的值，例如：

p {margin: 0.5em 1em 0.5em 1em;}

通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：

p {margin: 0.5em 1em;}

提示：CSS 定义了一些规则，允许为外边距指定最多 4 个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：

h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}        /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}               /* 等价于 1px 1px 1px 1px */

提示：如果您只是希望控制元素单边上的外边距，请使用单边外边距属性。

单边外边距属性
使用单边外边距属性为元素单边上的外边距设置值。例如，设置 p 元素的左外边距为 20px：

p {margin-left: 20px;}

您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
一个规则中可以使用多个这种单边属性，例如：

h2 {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
}

当然，对于这种情况，使用 margin 可能更容易一些：

p {margin: 20px 30px 30px 20px;}

提示：不论使用单边属性还是直接使用 margin，应该选择对自己来说更容易的一种方法。

提示和注释
Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。
相反地，Opera 将内部填充（padding）的默认值定义为 8px。
如果要对整个网站的边缘部分进行调整，必须对 body 的 padding 和 margin 进行自定义。

CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

<html>
<head>
<style type="text/css">
* {
    margin:0;
    padding:0;
    border:0;
}
#outer {
    width:300px;
    height:300px;
    background-color:red;
    margin-top:20px;
}
#inner {
    width:50px;
    height:50px;
    background-color:blue;
    margin-top:10px;
}
</style>
</head>
<body>
    <div id="outer">
        <div id="inner">
        </div>
    </div>
    <p>注释：请注意，如果不设置 div 的内边距和边框，</p>
    <p>那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>

所有的外边距属性在一个声明中

<html>
<head>
<style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
    <p>这个段落没有指定外边距。</p>
    <p class="margin">这个段落带有指定的外边距。</p>
    <p>这个段落没有指定外边距。</p>
</body>
</html>

CSS 外边距属性及描述
margin：简写属性。在一个声明中设置所有外边距属性。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。
margin-right：设置元素的右外边距。
margin-top：设置元素的上外边距。

本文番号： 前端笔记 - CSS/CSS3 - CSS元素外边距：margin属性

2016-08-03 3533人浏览

CSS元素外边距：margin属性

评论

点击这里取消回复

网站分类

热门推荐

猜你喜欢

公众号