CSS 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
################
CSS 外边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
####################
1.设置文本的左外边距
本例演示如何设置文本的左外边距。
<style type="text/css">
p.leftmargin {margin-left:1cm}
</style>
</head>
<body>
<p>这个段落没有指定</p>
<p class="leftmargin"> 这个段落带有指定的左外边距</p>
</body>
2.设置文本的右外边距
本例演示如何设置文本的右外边距。
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定</p>
<p class="rightmargin"> 这个段落带有指定的右外边距。</p>
</body>
3.设置文本的上外边距
本例演示如何设置文本的上外边距。
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定</p>
<p class="topmargin"> 这个段落指定了上外边距。</p>
</body>
4.设置文本的下外边距
本例演示如何设置文本的下外边距。
<style type="text/css">
p.bottommargin {margin-bottom:2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距</p>
<p class="bottommargin">这个段落指定了外边距。</p>
</body>
5.所有的外边距属性在一个声明中。
本例演示如何将所有的外边距属性设置于一个声明中。
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>