CSS 外边距 (margin) 实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
CSS 外边距 (margin) 实例- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline） 实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01设置文本的左外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01设置文本的左外边距</title>
<style type="text/css">
body{
background-color: #D863F2;
}
p.leftmargin {
margin-left: 2cm;
}
</style>
</head>
<body>
<p class="leftmargin">我设置了左外边距。</p>
<p>我没有设置外边距，上面那个段落好贱！</p>
</body>
</html>
02设置文本的右外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>02设置文本的右外边距</title>
<style type="text/css">
body{
background-color: #D863F2;
}
p.rightmargin {
margin-right: 10cm;
}
</style>
</head>
<body>
<p class="rightmargin">我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。我设置了右外边距。偶也！</p>
<p>我没有设置外边距，上面那个段落好贱！</p>
</body>
</html>
03设置文本的上外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03设置文本的上外边距</title>
<style type="text/css">
body{
background-color: #D863F2;
}
p.topmargin {
margin-top: 5cm;
}
</style>
</head>
<body>
<p class="topmargin">我设置了上外边距偶也！</p>
<p>我没有设置外边距，上面那个段落好贱！</p>
</body>
</html>
04设置文本的下外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>04设置文本的下外边距</title>
<style type="text/css">
body{
background-color: #D863F2;
}
p.bottommargin {
margin-bottom: 2cm;
}
</style>
</head>
<body>
<p>我没有设置外边距，下面那个段落好贱！
<p class="bottommargin">我设置了下外边距偶也！</p>
<p>我也没有设置外边距，上面那个段落好贱！</p>
</body>
</html>
05所有的外边距属性在一个声明中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>05所有的外边距属性在一个声明中。</title>
<style type="text/css">
body{
background-color: #D863F2;
}
p.margin {
margin: 2cm 4cm 3cm 4cm;
}
</style>
</head>
<body>
<p>我没有设置外边距，下面那个段落好贱！
<p class="margin">我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！我设置了外边距偶也！</p>
<p>我也没有设置外边距，上面那个段落好贱！</p>
</body>
</html>
CSS 外边距 (margin) 实例总结
