解决网页中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%的人还看了以下文章

  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    5.1K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    9.8K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    2.3K0
  • div+css制作上中下,中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。 上中下结构,中间又分为两列的全屏自适应布局HTML代码: <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

    2018年8月2日
    4.3K0
  • 第6课:超链接

    CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。

    2020年2月22日
    2.2K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    3.5K0

发表回复

登录后才能评论