解决网页中img图片出现多余空白的方案

网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决?

解决网页中img图片出现多余空白的方案

<table class="w1024" border="0" cellspacing="0" cellpadding="0">
         <tr>
        <td colspan="3">
                   <img src="img/top1.jpg" >
                   <img src="img/top2.jpg" >
                   <img src="img/top3.jpg" >
                   <img src="img/top4.jpg" >
        </td>
      </tr>
</table>

解决方法:

1、将图片转换为块级对象

设置img为“display:block;”。

.w1024 img{  display:block}

不同情况,解决方法也不同。

2、设置图片的垂直对齐方式

设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。

.w1024 img{  vertical-align: top;}

3、设置为背景图片

将每张图片设置为一个div或表格的一行的背景图片,设置div高度或单元格高度为图片高度。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5777.html

(1)
江山如画的头像江山如画管理团队
上一篇 2020年4月14日 上午9:20
下一篇 2020年4月18日 下午3:49

99%的人还看了以下文章

  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    1.2K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    2.8K0
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    2.4K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.2K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    3.4K1
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    6.4K0

发表回复

登录后才能评论