HTML页面渲染问题

图片标签的上下间距

img标签与与块级标签会存在一个上下间距，如图：标签间上下间距

这个间距在IE与chrome浏览器中都存在（所有我不认为这是兼容问题），清除这个间距的方法。

解决方式

1.为img标签设置vertical-align ：bottom;或vertical-align:middle;

解决上下间距问题

（注：旁边的行内标签变成了上下居中，或许某种情况下使用vertical-align属性达到盒子上下居中显示）
设置vertical-align：middle弊端是当图片大小不一致时，小图片会被上下居中显示，如图：

小图片被居中显示
2.去除img标签与块级标签之间的空白字符（空格、换行），为img标签的父盒子设置font-size ：0;
解决上下间距

此方式不仅解决图片的上下间距，而且img标签的左右间距也会被清除。且此方式与第一种的vertical-align：bottom一致，但若有行内标签与img标签并排，其文字无法显示。

img标签间的左右间距

多个并排的img标签或行内标签有左右间距，如图：
并排标签的左右间距

解决方式

将img标签与行内标签之间的空格去除。
有时空格会影响布局渲染，还有一个地方要注意

<textarea placeholder="不见了"> </textarea>
//标签间有空格的话H5的placeholder属性失效

内盒子上下居中

主要注意点是（1）上下居中一定要给父盒子高。（2）有些方式必须给子盒子宽和高
上下居中方法一： display:table

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
    <title>盒子居中</title>
</head>
<style type="text/css">
    body {
        margin:0; 
    }
    .father{
        display: table-cell;
        vertical-align: middle;
        height: 100px;
    }
    .father div {
        background-color: red;
        vertical-align: middle;

    }
</style>
<body>
    <div style="display: table;margin:auto ">
    <div class="father">
        <div>
            <span>12321</span>
        </div>
    </div>
    </div>
</body>
</html>

效果如图：表格布局实现居中

此方式可以不给子盒子设置宽高，但注意此方式不适用IE7及以下。

居中方式二：子绝父相，并采用负margin法。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
    <title>盒子居中</title>
</head>
<style type="text/css">
    body {
        margin:0; 
    }
    .two {
        position: relative;
        height: 200px;
        background-color: #eee;
    }
    .two div{
        background-color: blue;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px; // 可以不设
        height: 100px; // 可以不设
        margin-left: -50px; // 设置盒子高度的一半
        margin-top: -50px;
    }
</style>
<body>
    <div>
    <div class="two">
        <div>
            <span>12321</span>
        </div>
    </div>
    </div>
</body>
</html>

此方式好处是可以子盒子可以不设宽高，由子盒子内部的盒子撑出宽高。
缺点是：没有固定宽高时，margin的负值得由JS来动态设置。
改进：将margin的负值由transform:translate(-50%,-50%); 代替，则可以不用JS。但IE8及以下不支持transform，有兼容问题。

居中方式三：子绝父相，margin:auto;

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
    <title>盒子居中</title>
</head>
<style type="text/css">
    body {
        margin:0; 
    }
        .tree {
        position: relative;
        height: 100px;
    }
    .tree div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin:auto;
        width: 100px;
        height: 50px;
        background-color: red;
    }
</style>
<body>
        <div >
    <div class="tree">
        <div>
            <span>XXXXX</span>
        </div>
    </div>
    </div>
</body>
</html>

将margin设置成auto，有固定宽高子盒子,左右margin会被无限延伸。达到居中效果。但此方法IE7及以下无效。
附：内盒子不是div而是img标签时，可以不设置宽高也能自动居中。可能是图片自带宽高吧，如图：

图片自动有宽高