第一种，可以先查看图片的高度，把盒子的高度设置跟图片的高度一样高
第二种 给图片设置vertical-align:top/middle/bottom均可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
background-color: orange
}
img{
vertical-align: top
}
</style>
</head>
<body>
<div id="div1">
<img src="img/1.jpg" alt="" />
</div>
</body>
</html>
有缝隙的效果截图
解决办法：
第一种可以把几个span标签在一行写完不换行
第二种方法：
可以给span标签设置左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: paleturquoise
/*float: left*/
}
</style>
</head>
<body>
<span>哈哈</span><span>呵呵</span><span>嘻嘻</span>
<!--解决行元素缝隙的两种方式:
1.不要给行元素换行,在同一行写完!
2.给标签设置浮动!!!
-->
</body>
</html>
你看下你的全局的border margin padding 有没有给0 可能是全局的参数没有给零 或者是上层的CSS里有东西控制你的BACKGROUD不重复 居左 居上 是不是背景图片不够大 没有把位置占到呢？ 最好加个溢出隐藏 OVERFLOWN:HIDDEN
