collapsing margins of table

display=block的元素，垂直方向的collapsing margins会发生重合。
IE8/safari/chrome中table默认的display=table，其渲染时vertical margin会发生重合，与display=block的元素效果一样，但在firefox中测试其效果与float元素的效果一样，不会发生垂直方向的margin重合。
个人的解决方法是将table设置为float=left，并在其后设置一个clear=both的DIV，避免table的margin被重合。

关于collapsing margins详细说明可查看CSS21规范的8.3.1 Collapsing margins。
另外对于一个maring:10px的DIV元素，如果此元素没有内容，并没有设置padding和border值，其上部的margin与其下部的margin也会重合，也就是此DIV在垂直方向上只会占据10px的高度。如果此DIV的top或者bottom与别的元素发生过重合，则其本身的top和bottom margin不会再重合。
规范原文说明如下：
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
If the element’s margins are collapsed with its parent’s top margin, the top border edge of the box is defined to be the same as the parent’s.
Otherwise, either the element’s parent is not taking part in the margin collapsing, or only the parent’s bottom margin is involved. The position of the element’s top border edge is the same as it would have been if the element had a non-zero top border.

对于inline elements使用的几点说明

对于inline elements：
1、设置margin-top, margin-bottom这二个属性是无效的，但是有margin-left, margin-right。
2、设置以下几个属性也是无效的：min-width, min-heigth, width, heigth, max-width, max-height，另width的几个属性应用于table rows也是无效的，而height的几个属性应用于table columns也是无效的。
3、对于vertical-align，则只能对inline elements和table-cell elements生效。

CSS element position 计算公式

以下部分element.style的属性值需要用到parseInt(value || 0)来转换。

• clientWidth ＝ element.style.paddingLeft + element.style.width + element.style.paddingRight
  
• clientHeight = element.style.paddingTop + element.style.height + element.style.paddingBottom
  
• clinetLeft = borderLeftWidth
  
• clientTop = borderTopWidth
  
• clientRight = offsetWidth - clientWidth - clientLeft
  
• clientBottom = offsetHeight - clientHeight - clientTop
  
• element.style.left = element.offsetLeft - element.style.marginLeft
  
• element.style.top ＝ element.offsetTop - element.style.marginTop
  

当元素的offsetParent不是BODY时，上面最后二个公式需要特别注意。

解决IE6的浮动元素的双倍边距问题

对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：

div {float:left;margin:40px;display:inline;}

Reference:http://www.javaeye.com/news/3176

CSS inline-box and auto margin

line-height只对内联元素有效，对于块元素设置其实是作用在其内部的内联元素上。
水平七属性中margin-left、margin-right、width的值可以设置为auto，其他四个属性不能设置为auto。
水平七属性相加的值总是等于其父元素的width值。
margin的值可以取负值，padding和width不能取负值。
一行中，不同内联元素的内联框位置并不一定相同，根据line-hight、font-size计算，并受vertical-align影响。以下公式在vertical-align基于baseline的计算方法：
内联框的上边框位置：font-size - (font-size - line-height) / 2
内联框的下边框位置：font-size + (font-size - line-height) / 2
行间距等于该行中所有内联元素的内联框(inline-box)的最高位置减最低位置。

margin 和内联元素(inline elements)的关系

当将margin应用于内联元素时，margin的上下边距将不会影响到行高[产生的margin是存在的，不过因其是透明的故不能看得到]，左右边距则会影响内联元素的左右间距。如果将一个将粗的border应用于内联元素上时，行高也不会发生变化，border将会覆盖其他元素的显示。
能够改变全文本的行间距的CSS属性只有:
1、line-height
2、font-size
3、vertical-align

关于CSS中的position和float的二点说明

1、当float的元素的margin为负值时，其周边元素内容可能会覆盖到float元素上面。当float元素宽度大于容器宽度并margin为负值时，会使得float元素在容器二边都超出。
2、position: absolute的元素的一系列上级元素如果具有position:absolute/relative/fixed属性时，会根据其上级元素进行绝对定位。如果其上级元素没有position属性，则根据整个html文档定位。

[CSS Zen Garden]The Negative-Margin Solution for Center layout

#container {
background: #ffc;
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}

margin-left is half of #container width, and position of #container must be absolute.

[CSS Zen Garden]Centered Design Using Auto Margins

The preferred way to horizontally center any element is to use the margin property and set left and right values to auto. For this to work with layouts, you'll create a containing div. You must include a width for your containing div:

div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}