Img tag spacing problem solving
Img tag on pitch problems: a plurality of spaced between img, a distance between div tag comprising img
code show as below:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;padding: 0;
}
.content-wrapper{
padding: 30px;
height: 100px;
background-color: black;
color: white;
}
.avatar{
display: inline-block;
}
.avatar img{
width: 60px;
height: 70px;
}
.content{
display: inline-block;
}
.brand{
font-size: 12px;
display: block;
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="avatar">
<img src="1.jpeg">
</div>
<div class="content">
<span class="brand">前端小智</span>
<span class="brand">前端爱好者</span>
<span class="brand">终身学习者</span>
</div>
</div>
</body>
</html>
The effect is as follows:
As can be seen from the effects of image span tag images with a gap
The reason is because there are blank html characters caused.
Now that you know are caused by whitespace characters, but also pay attention to the content of the text whitespace characters, so we can solve the following ways:
As shown above, we can set the window in his father font size is 0 , then set the font in the corresponding sub-window to clear a gap,
The final results are as follows:
also a gap provided between the same token img img tag and tag fathers window is provided on the font size is 0 , then set the font in the corresponding sub-window can be friends
愿你成为终身学习者