CSS外边距属性
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
| 属性 | 描述 |
|---|---|
| margin | 在一个声明中设置所有外边距属性。 |
| margin-top | 设置元素的上外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
- 可以在一个声明中按照
上、右、下、左的顺序分别设置各边的外边距属性 - 也可以通过下面四个单独的属性
margin-top、margin-right、margin-bottom以及margin-left分别设置上、右、下、左外边距：
<head>
<title>CSS margin属性</title>
<style type="text/css">
div.margin{
width:50%;
border:1px solid red;
}
</style>
</head>
<body>
<div>这个段落没有指定外边距。</div>
<div
<div>这个段落没有指定外边距。</div>
</body>
<title>CSS margin属性</title>
<style type="text/css">
div.margin{
width:50%;
margin:40px 70px 10px 10px;border:1px solid red;
}
</style>
</head>
<body>
<div>这个段落没有指定外边距。</div>
<div
class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</div><div>这个段落没有指定外边距。</div>
</body>
综合实例：使用盒子模型美化表格
<head>
<title>CSS 盒子模型</title>
<style type="text/css">
</style>
</head>
<body>
<table width="168" border="0" cellpadding="3" cellspacing="8">
<tr><td
<tr><td>电子商务专业的学生应掌握网页设计的基础知识，因为以后要接触到大量的修改网页工作，至少应该为以后打下一个良好的基础</td></tr>
</table>
</body>
<title>CSS 盒子模型</title>
<style type="text/css">
table {
border: 1px solid #0033FF;
}
td.title {
border-bottom: 1px dashed #0066FF;
}</style>
</head>
<body>
<table width="168" border="0" cellpadding="3" cellspacing="8">
<tr><td
class="title">课程简介</td>
</tr><tr><td>电子商务专业的学生应掌握网页设计的基础知识，因为以后要接触到大量的修改网页工作，至少应该为以后打下一个良好的基础</td></tr>
</table>
</body>
©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持：淮阴工学院计算机与软件工程学院《Web开发技术》教学团队