css 小问题解决方法整理

1，图片垂直居中：

设置包括图片的div：height=20px；line-height=20px。

设置图片vertical-align：middle 就可以。

2，行内块元素有3px bug，可通过设置为块元素解决。典型元素：img input

行内元素：内容撑开宽高，宽高随内容变化而变化，不可控制宽高，用于控制字体、颜色。可设置line-height

块级元素：默认撑满行。可设置。

块级元素可包括行内元素、块级元素。行内元素不可包括块级元素。

3。margin-bottom跟margin-top不合并情况整合：

<1. 水平margin不会合并。

<2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。

<3. 浮动元素不会和不论什么元素（包含子孙节点）发生 margin 合并。

<4. overflow！

=visible的元素不和不论什么元素发生margin合并。

<5. 绝对定位的元素不和不论什么元素发生margin合并。

<6. inline-block 的元素不和不论什么元素发生margin合并。

<7. 设置 clear 属性的元素不和不论什么元素发生margin合并。

<8. 根元素不和不论什么元素发生margin合并。

<9. 父节点和第一个子节点发生margin-top合并。

<10. 假设最后一个子节点没有border以及padding，则和其父节点发生margin-bottom合并。

注意IE！特别是hasLayout对于margin合并也有影响，从而也造成了包括的绝对定位元素的位置差异。