td里面嵌套image标签后如何消除图片间隔

CreateTime--2018年3月7日16:18:12

Author:Marydon

情景还原:

<body>
<div style="background: url(../images/bgImg2.jpg);width: 142px;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/6.png" width="112" height="78" title="第一张"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/9.png" width="112" height="78" title="第二张"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/14.png" width="112" height="78" title="第三张"/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>

  结果展示:图片之间有间隔

  说明:图片高度为78px,但是td的高度为82px

  尝试1

  将table的高度改为:78*3=234px,经测试无效

  尝试2

  使用css样式,将td的高度统一修改为78px,td的高度仍然不变,还是82px,而且至少为82px,少于82px调整td无效。   

  

  解决方案:

  在每个td里面再嵌套一个div,调整div的宽度为78px

<body>
<div style="background: url(../images/bgImg2.jpg);width: 142px;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td>
<div>
<a href="#" target="_blank" class="">
<img src="../images/6.png" width="112" height="78" title="第一张"/>
</a>
</div>
</td>
</tr>
<tr>
<td>
<div>
<a href="#" target="_blank" class="">
<img src="../images/9.png" width="112" height="78" title="第二张"/>
</a>
</div>
</td>
</tr>
<tr>
<td>
<div>
<a href="#" target="_blank" class="">
<img src="../images/14.png" width="112" height="78" title="第三张"/>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<style type="text/css">
td div{
height:78px;
}
</style>

  效果展示:

  说明:白边是图片内容。

 

td里面嵌套img标签后如何消除图片间隔的更多相关文章

  1. a标签嵌套a标签在实际项目开发中遇到的坑

    大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素. 其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签 ...

  2. Java/Js下使用正则表达式匹配嵌套Html标签

    转自:http://www.jb51.net/article/24422.htm 以前写过一篇文章讲解如何使用正则表达式完美解决Html嵌套标签的匹配问题(使用正则表达式匹配嵌套Html标签),但是里 ...

  3. IE浏览器下a标签嵌套img标签默认带有边框

    最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

  4. 解决前端页面a标签嵌套a标签bug

    在前端页面中,一般二级导航栏会出现a嵌套a标签出现重复的父元素a标签bug 比如: <nav class="nav"> <ul> <li> &l ...

  5. 点击<a>标签后禁止页面跳至顶部

    一.点击<a>标签后禁止页面跳至顶部 1. 使用 href="javascript:void(0);",例如: <a href="javascript: ...

  6. 转:前端页面a标签嵌套a标签效果的两种解决方案

      这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要 ...

  7. c:param 标签后不要写 注释 。否则报错 Encountered illegal body of tag "c:import" tag, given its attributes

    c:param 标签后不要写 注释 .否则报错  Encountered illegal body of tag "c:import" tag, given its attribu ...

  8. 前端页面a标签嵌套a标签效果的两种解决方案

    这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要跳转 ...

  9. 关于p标签不能嵌套div标签引发的标签嵌套问题总结

    问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

随机推荐

  1. 迅为7寸工业触摸屏嵌入式平台可用于ARM嵌入式一体机

    7寸触摸屏介绍产品名称:7寸IPS高清屏幕分辨率:1280*800触摸屏类型:电容屏(五点触摸)接线方式: FPC 可应用于嵌入式一体机.自动售货机.广告机.智能自动终端.零售终端等 ARM平台处理器 ...

  2. leetcode_1011. Capacity To Ship Packages Within D Days_binary search二分

    https://leetcode.com/problems/capacity-to-ship-packages-within-d-days/ 传送带每天有最大传送量V,对于n个货物[w1,w2,w3. ...

  3. swift 语言评价

    杂而不精,一团乱麻!模式乱套,不适合作为一门学习和研究语言. 谢谢 LZ 介绍,看完之后更不想用 Swift 了.从 C++那里抄个 V-Table 来很先进嘛?别跟 C++一样搞什么 STL 就好了 ...

  4. Java软件开发不同薪资级别-技术要求

    15~20万 WEB应用服务器(Tomcat.Weblogic.Jetty.JBoss.WebSphere) NoSQL(Redis.MongoDB.HBase.Memcache) 消息中间件(Kaf ...

  5. python连接mysql的操作

    一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可. Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的l ...

  6. 类的封装,property特性,类与对象的绑定方法和非绑定方法,

    类的封装 就是把数据或者方法封装起来 为什么要封装 封装数据的主要原因是:保护隐私 封装方法的主要原因是:隔离复杂度(快门就是傻瓜相机为傻瓜们提供的方法,该方法将内部复杂的照相功能都隐藏起来了,比如你 ...

  7. Dynamic Web Module版本对应tomcat版本

    MyEclipse2017+JDK 1.8环境下 Dynamic Web Module版本3.1要对应tomcat7.0以上版本,不然部署项目时会出现错误(会出现无法部署项目的情况). Dynamic ...

  8. Failed to resolve filter报错原因

    问题 页面写过滤器,控制台报错,Failed to resolve filter 分析 语法错误?先检查 ``` {{ params | filterA }} filters: { filterA: ...

  9. 零基础入门学习Python(26)--字典:当索引不好用时2

    知识点 删除字典元素 能删单一的元素也能清空字典,清空只需一项操作. 显示删除一个字典用del命令,如下: >>> dict1 = {'a':1,'b':2,'c':3} >& ...

  10. private关键字

    Student.java /* * 学生类 * * 通过对象直接访问成员变量,会存在数据安全问题 * 这个时候,我们就想能不能不让外界对象直接访问成员变量呢? * 答案:能 * 如何实现呢? * pr ...