图片与盒子之间的缝隙问题、行元素缝隙问题
2020-07-18 本文已影响0人
Amanda妍
一、图片缝隙问题，图片与div之间有缝隙
两种方法：
第一种，可以先查看图片的高度，把盒子的高度设置跟图片的高度一样高
第二种 给图片设置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>
