网页图片之间有空隙的解决办法

最新推荐文章于 2023-04-30 23:56:25 发布

原创最新推荐文章于 2023-04-30 23:56:25 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #jsp #img

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了解决HTML页面中图片间水平空隙的问题。通过调整CSS样式中的图片垂直对齐方式，成功消除了图片间的不必要间隔。

前述：一个页面中图片与图片之间出现水平空隙，效果如图

代码部分如下：

<table width="980" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/top.jpg" width="980" height="90" border="0" usemap="#Map" />
		</td>
	</tr>
</table>

<map name="Map" id="Map">
	<area shape="rect" coords="706,39,742,57" href="common/center.jsp"
		target="main" />
	<area shape="rect" coords="791,44,827,61" href="common/help.jsp" />
	<area shape="rect" coords="875,48,910,66" href="login.jsp" />
</map>

<table width="980" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/top_2.jpg" width="980" height="68" border="0" />
		</td>
	</tr>
</table>

也尝试过<td><img>之间没有任何字符，以及在<img>标签加上 align="bottom"属性的写法，还是不行。最后解决的方法是在<head></head>之间插入img的css

代码如下：

/*设定图片样式，垂直对齐，解决了图片图片之间含有空隙的情况 2011.07.27 added by Lee.will*/
img {
	vertical-align: bottom
}

修复后的效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

某男

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

img使用br换行后之间有空隙的解决方法

09-25

在网页设计中，图片元素(img)的布局是一个常见的任务，而有时我们可能会遇到两个或多个图片换行排列时出现空隙的问题。这个问题主要是由于浏览器默认的行内元素对齐方式导致的。`<img>`标签在HTML中被定义为行内元素...

li中插入img图片间有空隙的解决方案

10-25

总结来说，解决`<li>`中`<img>`图片间空隙的问题，可以采用调整`vertical-align`属性或者设置`font-size: 0`的方法。具体选择哪种方案，应根据实际项目的需求和结构来确定。在实际开发中，可能还需要考虑浏览器兼容...

参与评论您还未登录，请先登录后发表或查看评论

两图片之间的的缝隙<img src=" " alt="" />

sky

11-30

1382

解决这种问题其实有很多种办法,那我随便介绍几种; a:img标签本身是个行内元素，所以当多个img排在一起时，它们之间如果有回车换行或者空格就会形成空隙，比如改成下面这样就没有空隙了或者也可以把img改为块级元素，再利用浮动，也可以去掉空隙：注意:每个img都要加浮动哦,要不然无效果,我以前就是只加一个,浪费好多时间; b:有些情况是这样:img{vert

图片间隙的问题

weixin_33873846的博客

05-28

404

在开发过程中我们肯定会有添加图片，或者图文混排的场景。那么在开发过程中如果一个div里面同时有多个图片，在浏览器中预览时我们会发现每个图片之间会有间隙。。。。 what?这是什么鬼。。形成这个的原因是因为设置的字体的原因。这时候如果你把font-size设置的越大，那么间距越大。解决这么一个问题，目前大致有两种方法：设置font-size=0 如果设置为0 的话，就不会被字体大小影响了。 ...

两个或者多个图片上下之间有空隙怎么办？

weixin_34353714的博客

11-14

302

img { outline-width:0px; vertical-align:top; } 学习交流群：364976091

img之间出现缝隙的原因_如何解决HTML5中图片之间的缝隙

weixin_39655160的博客

12-22

899

如何解决HTML5中图片之间的缝隙大家在做项目的时候应该都碰到过img标签中间有空隙的情况吧，如果标签中间有空隙的话那么效果非常的不好，今天小编就和小伙伴们探讨一下HTML5中图片之间的缝隙完美解决方法，需要的小伙伴一起来参考一下吧。在看解决方法之前我们先大致了解一下原因，标签中间有空隙是因为浏览器把元素当成了字，空隙是给一些对齐字母后仍然长出一截的(例如j,g)预留的。下面我们来看一下解决方法：...

图片缝隙的解决

weixin_59869855的博客

04-30

884

图片是一个行内元素，他可以设置宽高。行内块元素隔壁会有一个隐藏空白节点。图片默认是基线对齐，将图片设置为垂直对齐的底线对齐，可以消除图片的空隙。有一个隐形文本节点，随着设置字体的大小div随着撑大。随着字体的变大，空隙也跟着变大可以将字体大小设置为0。3.可以将行高设置为0，随着行高的加大缝隙随着加大。1.采用vertical-align。图片缝隙是因为有幽灵节点存在。2.将字体大小设置为0。

IE浏览器下的图片空隙间距BUG和解决办法.pdf

05-02

解决这个问题的方法有很多种，以下是几种常见的解决方案： 1. **浮动元素**：将`<li>`元素设置为浮动元素，如`float:left;`，这样可以消除上下文的影响，但需要注意清除浮动以防止布局问题。 ```css li { float: ...

img与容器下边界的空隙（缝隙）的解决方法

09-25

在网页设计中，有时会遇到一个常见的问题，即图片（img）与包含它的容器（通常是div）之间的下边界出现空隙或缝隙。特别是在Internet Explorer 7（IE7）浏览器中，这种现象尤为突出，而在更新的浏览器如IE8中则不太...

img图片在ie下有有空隙

08-22

#### 其他可能的原因及解决办法 除了上述提到的方法外，还有一些其他的因素也可能导致图片周围的空隙问题： - **图片自身的CSS样式**：有时候图片自身定义了一些额外的CSS样式，比如 `margin`、`padding` 等，这些都...

CSS：解决图片下面有空隙的简单的方法

weixin_34050519的博客

04-13

282

在用CSS制作网页过程中可能会碰到图片下面有空隙的问题，解决方法：在图片的css中加 vertical-align:bottom; 效果：转载于:https://www.cnblogs.com/wolongxzg/archive/2009/04/13/1434828.html...

解决图片与div之间的间隙问题

qq_45587146的博客

11-08

5265

解决图片与div之间的间隙问题前几天的晚自习作业遇到这样一个问题，在没有设置任何内边距，外边距的情况下，图片和div块元素之间会出现一些间隙，为此和同学讨论到了十一点多才解决了这个间隙问题（真是一把辛酸泪……），来吧，一起看看这些间隙问题，并干掉它！情况一：块元素中放图片，父子关系代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n

当div中插入图片时，图片下方有空隙的解决办法！

chen1057376155的博客

07-11

9061

当我们用div拼接一些图片时，会发现div下方会有多出来的一条白线，用chrome浏览器查看元素的时候，图片的高度是326.3px,但是作为容器的div的高度确是330px,貌似直接就四舍五入了，其中的原因是因为img作为行内元素，每次换行都会默认有有一个空隙如图所示，黄色的是两个span，他们都是行内元素，两个行内元素之间有一个空隙。红色的是两个div，他们都是块元素，之间并没有空

图片与图片上下之间有空隙的解决方法

风君子博客

12-24

3455

首先排除代码之间的换行符<br>，出现这个问题是因为图片为内联元素，有文字特性，默认存在间隙，所以会出现空白部分。可以将图片设置为block元素。 img{ display:block; } 还有种方法就是给父级设置fontsize:0，logo先不设置block 转自：https://www.fengjinwei.com/blog-847722.html ...

相邻图片之间有空白间隙的问题解决

weixin_42995152的博客

12-26

3983

相邻图片之间有空白间隙当在网页中两张相邻的图片渲染时，会有一定的空白间隙距离存在。、原因：这是因为< img>图片为 inline-block 行内块元素，这是 inline-block 行内块布局存在的弊端，会在 HTML 元素间中渲染出空白间隙。可以通过以下方式解决： 1、将图片元素设定为 display:block; img { display:block; } 适用于图片各自一行的情况。 2、为图片所在的父元素设置 font-size:0; 的形式来解决。 div.fa

HTML 图片之间的空格怎么设置,【归纳】速来看img图片之间的空白间隙的6种有效解决方案...

weixin_29001655的博客

06-09

6144

在进行网页排版时，遇到浏览器中的图片元素img下出现多余空白的问题绝对是常见的问题，该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline(基线)对齐的，而baseline又和父级元素底边有一定的距离(这个距离和fo...

解决网页图片之间有空隙的方法

向上的小草

11-13

3007

前述：一个页面中图片与图片之间出现水平空隙，效果如图代码部分如下： Html代码 table width="980" border="0" cellpadding="0" cellspacing="0"> tr> td> img src="images/top.jpg" width="980" h

在网页制作中,图片间有间隙的解决方案

zhaohongx的专栏

08-06

2096

第一种方法：在图片的父级加入：font-size:0px; 例如： (注：以上跟下面用到的one.jpg,two.jpg,three.jpg是随机定义的图片名，这个根据需要命名图片名称)。第二种方法：对图片写一个css样式：img{border:none;display:block;} 例如： img{ border:none; display:block;

怎么解决图片和导航条有空隙

05-25

要解决图片和导航条之间的空隙，可能有几种方法： 1. 使用CSS的负margin属性来减少图片和导航条之间的间距。例如： ``` img { margin-bottom: -10px; } nav { margin-top: -10px; } ``` 2. 使用CSS的position属性来定位图片和导航条的位置。例如： ``` img { position: absolute; top: 0; left: 0; } nav { position: relative; top: 50px; } ``` 3. 在HTML代码中将图片和导航条的代码紧密相邻，避免在它们之间添加不必要的空格或换行符。无论哪种方法，都需要根据具体情况进行适当的调整和实验。