行内、行内块元素之间的空白问题
产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
案例一：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>行内元素之间的空白问题</title>
</head>
<style>div{height: 500px;font-size: 20px;}.box1{background-color: aquamarine;}.box2{background-color:blueviolet;}.box3{background-color:burlywood;}
</style>
<body><div><span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span></div>
</body>
</html>
解决方案：
方案一：去掉换行和空格。
<body><div><span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span></div>
</body>方案二：给父元素设置font-size：0，在给需要显示文字的元素，单独设置字体大小。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>行内元素之间的空白问题</title>
</head>
<style>div{height: 500px;font-size: 0px;}.box1{font-size: 20px;background-color: aquamarine;}.box2{font-size: 20px;background-color:blueviolet;}.box3{font-size: 20px;background-color:burlywood;}
</style>
<body><div><span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span></div>
</body>
</html>
行内块的幽灵空白问题
产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的。
案例二：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>行内元素、行内块元素之间的空白问题</title><style>div{background-color: cadetblue;}</style>
</head>
<body><div><img src="../news_picture/no_picture1.png" alt="">xxxg</div>
</body>
</html>
解决方案：
方案一：给行内块设置vertical，值不为baseline即可，设置为middle、bottom、top均可。
div {background-color: cadetblue;}img {vertical-align: bottom;}方案二：若父元素中只有一张图片(不含其他文字、字母等)，设置图片为display:block。
div{background-color: cadetblue;}img{display: block;}
