图片与盒子之间的缝隙问题、行元素缝隙问题

html-css06

图片与盒子之间的缝隙问题、行元素缝隙问题,第1张

两种方法：

第一种，可以先查看图片的高度，把盒子的高度设置跟图片的高度一样高

第二种 给图片设置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