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

  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    4.6K0
  • Marquee标签制作滚动公告、新闻列表

    效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…

    2019年2月28日
    5.1K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    4.9K0
  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    4.1K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    3.8K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    6.0K0

发表回复

登录后才能评论