Collapsing margins
例子请用Firefox, Opera, Safari,google查看
before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
body { margin:0;padding:0;font:13px/14px arial;}
.context {float:left;}
#outside { margin-bottom: 100px;}
</style>
</head>
<body>
<div id="outside">
<div class="context">
父容器里设置margin-bottom:100px....是不是觉得象margin:100px auto 100px auto;
</div>
</div>
</body>
</html>
after
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
body { margin:0;padding:0;font:13px/14px arial;}
.context {float:left;}
#outside { margin-bottom: 100px;padding:1px;/*height:1px;*/ /*border:1px solid #000;*/}
</style>
</head>
<body>
<div id="outside">
<div class="context">
父容器里设置margin-bottom:100px....是不是觉得象margin:100px auto 100px auto;
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/starweb/archive/2008/11/27/1341979.html
Collapsing margins相关推荐
- CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 外边距折叠( Collapsing margins )详解
外边距折叠( Collapsing margins )1 在介绍 margin 特性的时候,简单的介绍了外边距折叠. Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 ...
- Collapsing margins(外边距合并)
开篇 块元素的上边距或下边距有时会合并为一个margin,这种情况称之为外边距的合并,即collapsing margins. 一个常见的css样式的bug html&css: <!DO ...
- css collapsing margins问题
概念 Collapsing margin,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,即外边距折叠.其中所说的 margin 毗邻,可以归结为以下两点: 这两个或多个外边距没有 ...
- html float作用,CSS float相关详解
float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点.因此,就特别整理总结一下. 一.float介绍 float元素也称为浮动元素,设置了float属性的元 ...
- 关于Block Formatting Context－－BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- margin折叠问题
在这个说明中,"collapsing margins"(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.pad ...
- 设置弹性框项目之间距离的更好方法
本文翻译自:Better way to set distance between flexbox items To set the minimal distance between flexbox i ...
- 子元素margin-top影响父标签原因
仅用来做笔记 来看css2.1盒模型中规定的内容: In this specification, the expression collapsing margins means that adjoin ...
最新文章
- 将深度学习低延迟推理性能提高一倍
- documentum中的Fulltext search的文章收集
- spring AbstractBeanDefinition创建bean类型是动态代理类的方式
- css3中transition和display的坑
- 处理ionic项目中，输入框的光标不自动定位，键盘不弹出的问题
- 暴风影音II升级进程stormliv.exe持续不停的调用WSPSelect()函数，它想干啥？
- 【历史上的今天】11 月 29 日：世界上第一个街机游戏；真空管的发明者诞生；武汉大学建校
- java已知两坐标求直线长度_java计算两点间的距离方法总结
- astrolog32 java,astrolog32 占星软件
- 为什么要做MSN聊天机器人
- 链接脚本在编程中的高级运用之一：可变长数组
- 职工考勤管理信息系统数据库课设_公司员工考勤管理信息系统的设计与实现
- Idea字体美化终极解决方案
- 一位用贞操换取欲望的仙女
- FCC Lifeline项目现已帮助美国低收入家庭接入高速互联网
- 解决 OneNote 项目符号快捷键 Ctrl+. 在 Windows 10 下无效问题
- FreeDOM —— 一个可迁移的网页信息抽取模型
- openFeign夺命连环9问
- 通过免费api获取天气
- Basler 学习笔记2