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

W3School-CSS 外边距 (margin) 实例的更多相关文章

  1. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  2. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  3. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  4. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  5. css外边距margin

  6. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  7. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

  8. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  9. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

随机推荐

  1. 3.Java网络编程之IP

    前面两篇博文我们已经简单了解了IP.端口.协议以及两种参考模型,我们现在重新从程序角度来看下这个参考模型. 如果我们从事的是Web网站开发,那么我们应该知道HTML是一种超文本标记语言 (Hyper ...

  2. 8.Struts2类型转换器

    类型转换器1.引入在Struts2中,请求参数类型不仅可以是String,还可以是其它类型.如,定义一个请求参数birthday为Date类型,给其赋值为1949-10-1,则birthday接收到的 ...

  3. sessionid如何产生？由谁产生？保存在哪里？

    面试问道这个我居然不知道怎么回答,当然也是因为我确实没有研究过.下面就是百度了一篇文章后简单回答这个问题. 参考:http://www.cnblogs.com/sharpxiajun/p/339560 ...

  4. jQuery-1.9.1源码分析系列（十一） DOM操作

    DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...

  5. vue+sass 下sass不能运行问题

    好久没写博文了,今天抽空写一写,最近在用vue.js build 项目,今早想使用sass来编译css,可是安装好依赖包之后仍然显示一下错误: ERROR in ENOENT: no such fil ...

  6. urlMappings与URL映射

    此配置节的作用就是往Web程序中添加URL的映射,从而达到用户访问映射后的URL(如/Page/AAA)也能访问到源URL(如/Page/PageAAA.aspx)的效果.这也是URL映射本来的作用. ...

  7. super.getClass()方法调用

    下面程序的输出结果是多少?import java.util.Date;public class Test extends Date{public static void main(String[] a ...

  8. junit4 assert类中的assert方法总结

    junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类. 1.assertTrue/False([String message,]boolean cond ...

  9. 6、ASP.NET MVC入门到精通——ASP.Net的两种开发方式

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 目前,ASP.NET中两种主流的开发方式是:ASP.NET Webform和ASP.NET MVC.从下图可以看到ASP.NET WebFo ...

  10. 使用TopSelf创建自宿主的Windows服务程序

    在传统的Windows服务开发过程中,需要添加一个服务安装程序,里面写安装,启动和停止服务等逻辑.现在,使用TopSelf可以简化这个过程. 首先,继承 ServiceControl 写一个应用服务类 ...