css margin塌陷问题
一、同级块级元素塌陷
html
<h2>
同级块级元素塌陷
</h2>
<div class="block1">
block1
</div>
<div class="block2">
block2
</div>
<div class="block3">
<div class="ib1 ib">
同级元素1
</div>
<div class="ib2 ib">
同级元素2
</div>
<div class="ib2 ib">
同级元素3
</div>
</div>
css
body{
margin:50px;
background-color:#ccc;
} .block1 {height: 50px;padding: 10px;margin: 10px;background: #fff;}
.block2 {height: 50px;padding: 10px;margin: 20px;background: #999;}
.ib {display:inline-block;width: 45%;margin: 10px;border: 1px solid #ff0;}
结果
图1
图2
图3
先看block1跟block2,按道理说,block1 有margin-bottom: 10px; block2有margin-top: 20px;那么block1跟block2之间的间距应该是有30px才对,事实上却只有20px,值比较大的margin起了作用;
再看块级内联元素,ib1、ib2、ib3,每个ib之间的margin是10px;结果是每个ib之间的左右和上下margin都有20px;
最后再看浮动的块级元素:图3,margin也是没有塌陷的。
结论说明margin塌陷只发生在真正意义的块级元素上(浮动跟那些inline-block不算),浏览器应该是希望我们块级元素只设置上下其中的一个margin就好了,避免margin塌陷。
二、包裹元素塌陷
html
<div class="p">
<div class="c">
我是子元素
</div>
</div>
css
.p {background: #fff;margin: 10px;}
.p .c {padding: 5px;background: #f00;margin: 20px;}
结果
当标签没有任何内容填充或者padding跟border时,它的高度由子元素的高度(包含了padding和border)决定,
这个时候,父元素跟子元素之间的高度就一致,上下的margin就会发生重叠,同样值大者起效。
所以要避免这种情况就要对父元素进行处理:
填充内容;
添加padding;
添加border;
再有一种就是为父元素添加 overflow:hidden;
css margin塌陷问题的更多相关文章
- 林大妈的CSS知识清单(二)可见格式化模型(内含margin塌陷与浮动闭合的解决方案)
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- margin塌陷与margin合并(margin),清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- margin塌陷与BFC总结
只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...
- margin的两个有趣现象:margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- 12-[CSS]-margin塌陷,margin 0 auto,善用父级的padding
1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 6.margin塌陷问题
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...
- margin塌陷和margin合并问题及解决方案
margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...
随机推荐
- Java从零开始学二十三(集合Map接口)
一.Map接口 Collection.Set.List接口都属于单值的操作,即:每次只能操作一个对象,而Map与它们不同的是,每次操作的是一对对象,即二元偶对象,Map中的每个元素都使用key à v ...
- Spring -- 三种配置方式
1.Explicit configuration in XML:显示的XML配置. 优点: 1)XML配置方式进一步降低了耦合,使得应用更加容易扩展,即使对配置文件进一步修改也不需要工程进行修改和重新 ...
- 减小App包的大小
检查.ipa文件 首先获得app的ipa文件. 将ipa文件的后缀改为.zip,解压得到包内容. 查看资源文件哪个最大.然后试着对最大的文件即可处理 图片 尽量使用8-bit图片 使用8-bit的PN ...
- 【laravel5.4】自定义404、503等页面
1.处理自定义错误或不存在页面:生产环境一定要关闭debug模式. public function render($request, Exception $exception) { if ($exce ...
- vim+xdebug调试PHP
一.安装xdebug 1.编译安装xdebug,也可以使用pecl install xdebug wget http://xdebug.org/files/xdebug-2.3.2.tgz tar - ...
- HDUOJ--1874 畅通工程续
畅通工程续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- HDUOJ---2112HDU Today
HDU Today Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- windows平台下压缩tar.gz
windows平台下很多压缩软件(如360压缩)都支持tar.gz的解压,但不支持压缩 推荐一款支持tar.gz压缩的软件7zip 下面介绍可视化和命令行两种操作方式将文件压缩为tar.gz 可视化操 ...
- 【js与jquery】jquery循环滚动新闻
2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...
- iOS获取设备卸载后不变的UUID
1.首先导入系统库Security.framework 2.创建文件SFHFKeychainUtils.h如下(复制即可): @interface SFHFKeychainUtils : NSObje ...