W3School-CSS 外边距 (margin) 实例

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) 实例总结

posted @ 2015-12-26 11:03  IamHoey  阅读(375)  评论(0)  编辑  收藏  举报