CSS 图片间隙问题解决

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 196px;
height: 150px;
border: 1px solid red;
}
p{
width: 196px;
height: 40px;
background-color: red;
}
img{
/* 方法① */
/* vertical-align: bottom(top|middle) */
/* 方法② */
/* display: block; */
}
</style>
</head>
<body>
<div>
<img src="img/img1.png"/>
<p>这是一段文字</p>
</div>
</body>
</html>

片与文字之间存在间隙(空白), 解决方法有两个

vertical-align: bottom(top|middle); 任意一个属性

display:block; 将图片转换为块元素

vertical-align：指定元素的垂直对齐方式

top 把元素的顶端与行中最高元素的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* {

margin: 0px;

padding: 0px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

}

body {

background-color: #FFFFFF;

text-align: center;

font-family: "宋体";

font-size: 12px;

color: #575757;

}

#banner {

height: 210px;

width: 982px;

margin: 0 auto;

}

#menu {

height: 87px;

width: 982px;

margin: 0 auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

根据我们的案例，边框、边界、边距都设置成0了，图片与图片之间还是有空隙，这是为什么呢？

记得之前解决的方法是，img标签符之间不要有空格或者回车。

就是写成这样的

还有些其他的方法，可以让其在水平方向上不留下空隙，也就是左右的空隙，比如

#menu { font-size:0;} //意思是父级元素的字体大小为0，img默认是根据父元素的baseline进行对齐的，把父元素的字体大小设置为0，就没有空隙了，作为子元素的img对齐相应的也就没有空隙了

#menu {letter-spacing:-600px}

家好，我是兼职小哥，我过去做过很多个企业网站，尤其医美网站做的比较多，大约1000多个。如果您缺少好的网站样式呢，不妨给我留言啊。

下面咱们书归正传，我曾经在一家民营医院做过网络总监，美工是以前的院长招聘来的，技术实在不敢恭维，切出来的图片，做成网页经常会有白色的间隙。这是怎么回事呢？这种医美专题经常因为这个原因返工。设计一个专题要好几天，切图还要切一天。

我们通常使用最新版本的fireworks切图，这样运行速度快，效率高，切图这后，可以直接导出生成网页和css样式

css中有这样一句关键代码，可以避免样式的原因图片出现间隙。

<style> img{ border:none; display:block; }
</style>

下面给大家演示如何做切片图片不会有重叠会白色间隔，前先用左边的切片工具切出两个矩形区域。

选中刚才做的两个切片，在对齐面板中输入间距为1，再点水平间距按钮。

这样一下就把图片切片对齐的十分好看了，有几十个图片的时候也这样处理，您就不用反复拖拽鼠标加上用计算器计算位置和坐标了，切片位置会非常工整。

这个技巧将为美工切图的过程节省大量的时间，美工可以出去先喝杯茶了。

说明：我用的配图不代表会计这个专业真是的一生无忧，这个是一饱和和专业。在我们这种三线城市，会计的工资才1000多，还没有保险。
美工的工作也是非常非常累，市场也是饱和的，永远会有源源不断的新的毕业生被招到到单位里面来，美工的可替代性非常大。最好的办法就是把做网站外包出去做。

记住我是您工作中的好帮手，如果这篇文章对您有用，请关注我吧！

在线咨询

上一篇：5分钟上手FineBI，教你如何快速分析数据，一学就
下一篇：教你用十行代码实现网页标题滚动效果

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 图片间隙问题解决

您的项目需求