CSS中 Padding和Margin两个属性的详细介绍和举例说明
代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
#div1{
width:100px;
height:100px;
background-color:red;
margin:0 auto;
}
#div2{
width:100px;
height:100px;
background-color:green;
/* margin-top:10px; *//* 元素与元素之间的距离 */
border:3px solid #000;
margin:10px auto 0px;
}
#div2 h1{
font-size:12px;
background-color:yellow;
margin-top:10px;/* 元素与元素之间的距离 */
/* padding-top:10px; *//* 增加了内容的宽高 */
}
#div2 span{
/* 行内元素没有具体的宽高 */
font-size:12px;
background-color:red;
display:inline-block;/* 将行内元素转化为行内块，有了具体的宽高 */
/* margin-top:10px; */
padding-top:10px;
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'>
<h1>我是标题</h1>
<span>我是行内元素</span>
</div>
</body>
</html>
一、padding
1、语法结构
（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding：10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距
2、可能取的值
（1）length 规定具体单位记的内边距长度
（2）% 基于父元素的宽度的内边距的长度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”
二、margin
1、语法结构
（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距
2、可能取的值
（1）length 规定具体单位记的外边距长度
（2）% 基于父元素的宽度的外边距的长度
（3）auto 浏览器计算外边距
（4）inherit 规定应该从父元素继承外边距
3、浏览器兼容问题
（1）所有浏览器都支持margin属性
（2）任何版本IE都不支持属性值“inherit”
三、margin和padding的区别用图表示为
例如：
在html文件的<body></body>之间写入如下代码:
<div id=”ID1″>
<h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠.</h1>
</div>
在与其外联的css文件中写入:
* {
padding:0;
margin:0;
}
#ID1 {
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #F00;
}
代码解释:
1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1;
2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零;
3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px;
4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线.
依据以上解释, 我们应该得到如下效果(Fig. 3):
即ID1的margin-top/bottom=ab=ef=10px;
ID2的margin-top/bottom=bc=de=30px;
但用浏览器打开html文件, 却得到Example4的效果, 如下图(Fig. 4):
即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.
为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.
如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.
我们需要在css文件中加入如下代码(红色部分):
#ID1 {
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
padding-top:1px;
padding-bottom:1px;
}
或是：
#ID1 {
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
border-top:1px solid #333;
border-bottom:1px solid #333;
}
CSS中 Padding和Margin两个属性的详细介绍和举例说明的更多相关文章
- CSS中padding、margin、bordor属性详解
一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...
- CSS中padding、margin两个重要属性的详细介绍及举例说明
http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...
- CSS中padding和margin以及用法
CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...
- css中padding与margin
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- 【转】图解CSS padding、margin、border属性
http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...
随机推荐
- sql DATEDIFF 函数
sql DATEDIFF 函数 今天的所有数据: 昨天的所有数据: 7天内的所有数据: 30天内的所有数据: 半个月的所有数据: 本月的所有数据: 上月的所有数据: 本年的所有数据: --查询今天是 ...
- centos redis自启动
#!/bin/sh # chkconfig: 2345 90 10 # description: Redis is a persistent key-value database # Simple R ...
- oracle下关于table的常用sql整理
创建表,create TABLE table( 列名称1 数据类型1, 列名称2 数据类型2, 列名称3 数据类型3, ......); eg: create table TABLE_24751( i ...
- Thymeleaf初探
Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎.类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用 ...
- TF_RNNCell
参考:链接. RNNCell BasicRNNCell GRUCell BasicLSTMCell LSTMCell MultiRNNCell 抽象类RNNCell 所有的rnncell均继承于RNN ...
- java8学习之BiFunction函数式接口实例演示&Predicate函数式接口详解
BiFunction函数式接口: 在上次中已经对BiFunction接口进行了初步的认识,这里对它进一步学习,这里打算新建一个Person实体,然后新建若干个Person的实例存放在集合中,最后再根据 ...
- windows通讯之evpp
- （八）zabbix获取到的数值自定义单位
1) 查找php文件 # find / -name "func.inc.php" /usr/share/zabbix/include/func.inc.php 2)修改文件 #vi ...
- Java中两个Long对象如何比较是否相等
学java的都知道8种基本类型,知道Long和long的区别,前者定义的是对象,后者定义的是long类型的变量. 但是今天在比较两个Long类型值的时候碰到一个坑,如下: 问题如下 Long a = ...
- Laravel 引入第三方类库及自定义函数
1.新建一个目录放第三方类库 2.找到composer.json文件打开,在里面autoload 下classmap下面加入类库路径 3根目录下运行composer dumpautoload 4.使用 ...