碰到margin无效问题，查的一些资料。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Margin</title>
<style type="text/css">
.container{
margin: 0 auto;
width: 800px;
padding: 0 10px 10px;
outline: 1px solid red;
}
.item{
height: 50px;
margin-top: 10px;
outline: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="item">默认margin</div>
<div class="item"></div>
</div>
</body>
</html>
实际结果：
第一个div的margin-top没生效,一般情况下是两个相邻的div的margin-bottom与margin-top会出现坍塌，而这里是父子两个元素。
期望结果：
IE浏览器是由所谓的hasLayout引起：
1.该盒子加浮动；
2.用内边距来解决（给其父元素一个设置个内边距）
3.overflow：hidden；
4.给其父元素一个设置个border属性也可解决。
5.绝对定位
参考：
http://adamghost.com/2008/12/ie-haslayout-%E8%AF%A6%E8%A7%A3/
http://www.cnblogs.com/imhurley/archive/2011/11/23/2260764.html
对于非IE浏览器可查看下面的W3C规范：
Here are the relevant points from the W3C spec:
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse [...]
Two margins are adjoining if and only if:
- both belong to in-flow block-level boxes that participate in the same block formatting context
- no line boxes, no clearance, no padding and no border separate them
- both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
- top margin of a box and top margin of its first in-flow child
The reason why doing any of the following prevents the margin collapse:
-
Floating either of your
divelements - Making either of of your
divelements inline blocks - Setting
overflowof#outertoauto(or any value other thanvisible)
Is because:
- Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
- Margins of inline-block boxes do not collapse (not even with their in-flow children).
The left and right margins behave as you expect because:
Horizontal margins never collapse.
相关推荐
BORDER-COLLAPSE: collapse; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; FONT-SIZE: 70%; MARGIN-LEFT: 10px } .issuetable { BACKGROUND-COLOR: #...
border-collapse:collapse;} td{text-align:center;padding:0;margin:0;} form{margin:0;} .bgp a,.bgp span{display:block;cursor:pointer;} .bgp .bgp-fr{margin:0 auto;} #wrapper{text-align:ce 部分代码
<... <head> <meta charset="utf-8">...meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no...border-collapse: collapse; text-align: center; }
css +=" border-collapse: collapse;"; css +=" font-size: 15px;"; css +=" width: 98%;"; css +="}"; css +=""; css +="td{"; css +=" border: 1px solid #ddd;"; css +=" text-align: left;"; css +=" ...
table { border-collapse:collapse; } body { color:#333; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff; } a { color:#666; text-decoration:none; } a:visited { color:#666; }...
display:inline-block}#mCon .pinyin{display:inline-block}#mCon .c-icon-chevron-unfold2{margin-left:5px}#mMenu a{width:100%;height:100%;display:block;line-height:22px;text-indent:6px;text-decoration:...
JavaScript实现简易购物车最全代码解析(ES6面向对象) 本文实例为大家分享了JavaScript实现简易购物车的具体代码，供大家参考，具体内容如下 代码： <!... position: relative;... border-collapse:
在使用HTML表的时候有时候需要我们改变行距，但是改变margin，padding，collapse等方法效果都不是很好。在这里我找到了一个实用的小技巧。利用display属性+margin来实现。 例子： tr{margin-top:0px;padding:0px;...
table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */...
本文实例讲述了jQuery表格(Table)基本... border-collapse: collapse; border-spacing: 0; margin-right: auto; margin-left: auto; width: 800px; } th, td { border: 1px solid #b5d6e6; font-size: 12px;
Fix missing .m class for general margin Fix sidebar-panel heihgt in Angular project Fix loading buttons in Angular project Fix closing secend level menu in Rails project Fix menu navigation strucutre ...
Fix missing .m class for general margin Fix sidebar-panel heihgt in Angular project Fix loading buttons in Angular project Fix closing secend level menu in Rails project Fix menu navigation strucutre ...
leftmargin="0" topmargin="0" marginheight="0" marginwidth="0"去除页面边框 list-style-type:none;去除li点 "color:red;text-decoration:none;超链接颜色下划线 html,body{ height:100%;overflow:hidden; }...
用Javascript实现一个基本的运算器，具体内容如下 使用表格布局，JS添加事件 <!...<... <head lang="en">... border-collapse: collapse; margin: auto; } .trr{ width: 400px; height: 1
附上两个我经常使用的table样式： 复制代码代码如下: <... border-collapse: collapse; margin:0 auto; } td{ height:30px; } h1,h2,h3{ font-size:12px; margin:0; padding:0; } .table{ border:1px solid #ca
border-collapse: collapse; /*合并表格相临边框*/ } /* 这个日历没有进行定义的内容包括： */ #calendar td{} /* 日历单元格样式 */ #calendar a{} /* 有日志的号数样式(链接样式） */ #calendar a:hover{}...
随着web标准的广泛传播,表格渐渐被我遗忘,但是表格还是有它优秀的一面,数据...border-collapse:collapse;} td,th{border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left;} th{text-
border-collapse: collapse; /*合并表格相临边框*/ } /* 这个日历没有进行定义的内容包括： */ #calendar td{} /* 日历单元格样式 */ #calendar a{} /* 有日志的号数样式(链接样式） */ #calendar a:hover{}...
sensitivity at the maximum loading point or the collapse point. The voltage stability criterion is modeled directly into the load-shedding scheme. In any UVLS scheme finding the global point is very ...
本文实例为大家分享了vue... border-collapse: collapse; margin: 20px auto; } table th,table td{ background: #0094ff; color: white; font-size: 16px; padding: 5px; text-align: center; border: 1px so