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. 重温Servlet学习笔记--Cookie对象

    首先要了解cookie必须得先了解http协议,,Cookie是http协议指定的,先由服务器保存cookie到浏览器,在下次浏览器请求服务器时把上次请求得到的cookie归还给服务器,cookie以 ...

  2. MSIL Hello World

    最近由于需要,开始阅读 MSIL 方面的东西.我读的是<.NET 探秘——MSIL 权威指南>(<Expert .NET 2.0 IL Assembler>中译版).感觉没什么 ...

  3. 基于 Hive 的文件格式：RCFile 简介及其应用

    转载自:https://my.oschina.net/leejun2005/blog/280896 Hadoop 作为MR 的开源实现,一直以动态运行解析文件格式并获得比MPP数据库快上几倍的装载速度 ...

  4. Block知识点总结

    block的作用 block用于保存一段代码 在适当的时候再使用  它是一种数据类型 block的定义格式: 返回值  (^block变量名)(形参列表) = ^(形参列表) { 需要执行的代码}; ...

  5. Xamarin.Android和UWP之MVVM的简单使用(一)

    0x01 前言 就目前而言,MVVM可以说是挺流行的,无论是web端还是移动端,web端的主要代表angularjs,avalonjs等, 移动端(xamarin,uwp)的代表应该是mvvmligh ...

  6. label用js，jquery取值赋值，以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  7. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

  8. C# ~ 从 委托事件 到 观察者模式 - Observer

    委托和事件的部分基础知识可参见 C#/.NET 基础学习 之 [委托-事件] 部分: 参考 [1]. 初识事件 到 自定义事件: [2]. 从类型不安全的委托 到 类型安全的事件: [3]. 函数指针 ...

  9. C#~异步编程再续~大叔所理解的并行编程(Task&Parallel)

    返回目录 并行这个概念出自.net4.5,它被封装在System.Threading.Tasks命名空间里,主要提供一些线程,异步的方法,或者说它是对之前Thread进行的二次封装,为的是让开发人员更 ...

  10. jquery点击隐藏和显示

    <script type="text/javascript"> $("#close").click(function(){ $("#cen ...