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. 几个步骤轻松搞定ASP.NET 依赖注入。

    http://www.it165.net/pro/html/201407/17685.html 我在网上看到了这篇文章,这边文章主要说的方法就是通过读取配置文件来解决依赖注入的问题.但是每次新建一个依 ...

  2. Access数据库多表连接查询

    第一次在Access中写多表查询,就按照MS数据库中的写法,结果报语法错,原来Access的多表连接查询是不一样的 表A.B.C,A关联B,B关联C,均用ID键关联 一般写法:select * fro ...

  3. 测试为什么Low

    你从来没有因为一个歌手不会写曲填词而说歌手很Low! 你从来没有因为一个演员不会摄影.唱歌而说演员很Low! 你从来没有因为一个记者不会摄影,拍照而说记者很Low! 你从来没有因为一个美食家不会烧菜, ...

  4. 深入剖析tomcat之一个简单的servlet容器

    上一篇,我们讲解了如果开发一个简单的Http服务器,这一篇,我们扩展一下,让我们的服务器具备servlet的解析功能. 简单介绍下Servlet接口 如果我们想要自定义一个Servlet,那么我们必须 ...

  5. Net设计模式实例之桥接模式( Bridge Pattern)

    一.桥接模式简介(Brief Introduction) 桥接模式(Bridge Pattern),将抽象部分与它的实现部分分离,使的抽象和实现都可以独立地变化. Decouple an abstra ...

  6. 从零开始，搭建博客系统MVC5+EF6搭建框架（2），测试添加数据、集成Autofac依赖注入

    一.测试仓储层.业务层是否能实现对数据库表的操作 1.创建IsysUserInfoRepository接口来继承IBaseRepository父接口 namespace Wchl.WMBlog.IRe ...

  7. STM32Cube Uart_DMA测试工程

    1.打开软件,新建工程,选择芯片信号,这里选择 2.USART1使能选择"Asynchronous"模式:            3.配置"RCC",High ...

  8. Lock、ReentrantLock、synchronized、ReentrantReadWriteLock使用

    先来看一段代码,实现如下打印效果: 1 2 A 3 4 B 5 6 C 7 8 D 9 10 E 11 12 F 13 14 G 15 16 H 17 18 I 19 20 J 21 22 K 23 ...

  9. php和js中json的编码和解码

    php中 1)编码 $jsonStr = json_encode($array) 2)解码 $arr = json_decode($jsonStr) <?php echo json_encode ...

  10. MySQL字符串替换与HTML转义

    ps:今天遇到一个问题,从数据库读取一个字符串,然后在jsp用EL表达式显示时,因为数据库原始数据是带有HTML标签的,所以显示的时候会把标签直接转换成HTML,但是我想要的是HTML标签字符串,所以 ...