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. JsTree实现简单的CRUD

    现在需要将省市县区域这块搞成树状图的形状,由于项目使用的AngularJS+ABP+WebAPI各个模块之间数据传输形式是json格式,那么对于JsTree来说就方便很多了,只需要将json数据搞成我 ...

  2. cmd执行SQL语句

    首先新建txt文本,复制粘帖以下内容,保存为cmd执行SQL.bat.注意是bat文件 osql -S 服务器名称 -d 数据库 -U 登录名 -P 密码 -i 盘符:\文件夹\文件.sql

  3. 淡蓝风格的手机登录HTML模板

    查看效果:http://hovertree.com/texiao/mobile/10/ 或者手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> <html ...

  4. ListView灵活的用法

    以下是示例的效果图: WinForm的ListView控件是可以分组显示的,还可排序. 可以把ListView的View属性设置为Details 完整项目请到下面网址查找下载 http://hover ...

  5. Java之数组篇

    动手动脑,第六次Tutorial--数组 这次的Tutorial讲解了Java中如何进行数组操作,包括数组声明创建使用和赋值运算,写这篇文章的目的就是通过实际运用已达到对数组使用的更加熟练,下面是实践 ...

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

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

  7. c#中奖算法的实现

    算法名称 Alias Method public class AliasMethod { /* The probability and alias tables. */ private int[] _ ...

  8. 从零开始学 Java - Windows 下安装 JDK

    关于未来 "我要死在火星.在我死去的时候能够想着人类能有一个美好的未来--有可持续的能源,同时能够殖民其他的星球来避免人类灭绝的最坏可能." 官网下载 直接打开官网:http:// ...

  9. 【工业串口和网络软件通讯平台(SuperIO)教程】二.架构和组成部分

    1.1    架构结构图 1.1.1    层次示意图 1.1.2    模型对象示意图 1.2    IO管理器 IO管理器是对串口和网络通讯链路的管理.调度.针对串口和网络通讯链路的特点,在IO管 ...

  10. Storm的BaseBasicBolt源码解析ack机制

    我们在学习ack机制的时候,我们知道Storm的Bolt有BaseBasicBolt和BaseRichBolt.在BaseBasicBolt中,BasicOutputCollector在emit数据的 ...