这篇文章主要为大家展示了“CSS中margin属性怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS中margin属性怎么用”这篇文章吧。
CSS 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距可以使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em，也可以直接设置为 auto。
常见的做法是为外边距设置长度值。例如，在 h2 元素的各个边上设置了 1/4 英寸宽的空白：
h2 {margin : 0.25in;}下面的例子为 h2 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h2 {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 个值，例如：
h2 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h3 {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
一个规则中可以使用多个这种单边属性，例如：
h3 {
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中margin属性怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
