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. CSS实现单行与多行文字省略（truncation）

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  2. O2O的实时搜索引擎

    O2O行业通常都会基于地理位置派发用户订单给距离最近的服务提供者,因此必须解决位置高效索引和快速检索的问题.位置索引的最大挑战是位置可能持续变化,因此索引的更新量会非常庞大,传统搜索引擎难以应对. 我 ...

  3. 8.3 使用Fluent API进行属性映射【Code-First系列】

    现在,我打算学习,怎么用Fluent API来配置领域类中的属性. using System; using System.Collections.Generic; using System.Linq; ...

  4. Unity3D 5.x 简单实例 - 发射炮弹

    1,下载.安装: http://unity3d.com/cn/get-unity/download/archive 建议直接借助 UnityDownloadAssistant 进行安装,根据需要勾选需 ...

  5. html中<radio>单选按钮控件标签用法解析及如何设置默认选中

    <input type="radio" name="radio" value="1">单选1 <input type=&q ...

  6. php 实现设计模式之 享元模式

    <?php class Book{ public $title; public $author; public function __construct($title,$author){ $th ...

  7. 能力素质模型咨询工具(Part1)

          之前写过由企业家基本素质想到的文章,里面提及一些能力与素质,以下有内容也可以参考: 领导职位 表6-1 远见卓识的行为表现 级 别 行 为 表 现 A (1)关注行业的前景和环境的变化, ...

  8. 高性能 TCP & UDP 通信框架 HP-Socket v3.2.3

    HP-Socket 是一套通用的高性能 TCP/UDP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C#.Del ...

  9. MVC数据传递

    一.数据传递 1.ViewData[]: 用法:action中:ViewData["key"]="aaa";,V层接收ViewData["key&qu ...

  10. thinkcmf开发--关于控制器

    一.安装 安装---删除install文件--删除index.php--修改数据库信息--创建数据库 修改数据库信息:\data\conf\db.php(包括服务器地址) 二.创建mobile app ...