行内、行内块元素之间的空白问题
产生的原因:
行内元素、行内块元素 ,彼此之间的换行会被浏览器解析为一个空白字符。
案例一:
html
<!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>

解决方案:
方案一:去掉换行和空格。
html
<body>
<div>
<span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span>
</div>
</body>
方案二 :给父元素设置font-size:0,在给需要显示文字的元素,单独设置字体大小。
html
<!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>

行内块的幽灵空白问题
产生原因:
行内块元素与文本的基线 对齐,而文本的基线与文本最低端之间是有一定距离的。
案例二:
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均可。
css
div {
background-color: cadetblue;
}
img {
vertical-align: bottom;
}
方案二:若父元素中只有一张图片(不含其他文字、字母等),设置图片为display:block。
css
div{
background-color: cadetblue;
}
img{
display: block;
}
