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) 实例的更多相关文章
-
CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
-
理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
-
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
-
深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- css外边距margin
-
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
-
Css 外边距折叠(collapsed margin ) 浅析
Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...
-
css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
-
CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...
随机推荐
-
使用tungsten将mysql的数据同步到hadoop
背景 线上有很多的数据库在运行,后台需要一个分析用户行为的数据仓库.目前比较流行的是mysql和hadoop平台. 现在的问题是,如何将线上的mysql数据实时的同步到hadoop中,以供分析.这篇文 ...
-
NSDate 时间
NSDate *date=[NSDate date]; NSDateFormatter *formatter=[[NSDateFormatter alloc]init]; formatter.date ...
-
Python的下载与安装
linux系统由于自身的需要,自带了Python,而Windows的系统就没有自带Python.本篇Blog介绍在win8.1下,安装Pathon需要注意的问题,包括常见的0x80240017.250 ...
-
2010-2014总结 ____V_V____ hello-world
.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table ...
-
App Store审核被拒的23个理由
原文地址 iOS 应用提交审核要持续一周或者更久,在提交之前,我们一定要进行「自我审查」,避免被拒.ASO100 为大家收集整理了2015年 App Store 审核被拒的23个理由,并且附上官方拒绝 ...
-
xgboost在windows上的安装
xgboost是一个boosting+decision trees的工具包,看微博上各种大牛都说效果很好,于是下载一个,使用了一下,安装步骤如下. 第一步,编译生成xgboost.exe(用于CLI) ...
-
ssh远程登录Ubuntu报错：Permission denied, please try again.
ssh到server上的时候密码是对的但是报如下信息:# ssh 172.16.81.221root@172.16.81.221's password:Permission denied, pleas ...
-
HTML5实现的视频播放器01
HTML5实现的视频播放器 什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放 ...
-
为自己的Android应用添加广告
平时也写了不少Android小应用,但是都是做练习之用,从来没有想过添加广告赚钱这一说. 个人是非常反感在应用内添加广告这种行为的,非常影响用户体验,不小心点到广告的话,手机流量哗哗地就没了··· 但 ...
-
MySQL触发器在PHP项目中用来做信息备份、恢复和清空的方法介绍
案例:通过PHP后台代码可以将员工的信息删除,将删除的员工信息进行恢复(类似于从回收站中恢复员工信息),并且还可以将已经删除的员工进行清空(类似于清空回复站的功能). 思路:要有一张员工表,还要有一张 ...