td里面嵌套img标签后如何消除图片间隔
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标签后如何消除图片间隔的更多相关文章
- a标签嵌套a标签在实际项目开发中遇到的坑
大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素. 其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签 ...
- Java/Js下使用正则表达式匹配嵌套Html标签
转自:http://www.jb51.net/article/24422.htm 以前写过一篇文章讲解如何使用正则表达式完美解决Html嵌套标签的匹配问题(使用正则表达式匹配嵌套Html标签),但是里 ...
- IE浏览器下a标签嵌套img标签默认带有边框
最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!
- 解决前端页面a标签嵌套a标签bug
在前端页面中,一般二级导航栏会出现a嵌套a标签出现重复的父元素a标签bug 比如: <nav class="nav"> <ul> <li> &l ...
- 点击<a>标签后禁止页面跳至顶部
一.点击<a>标签后禁止页面跳至顶部 1. 使用 href="javascript:void(0);",例如: <a href="javascript: ...
- 转:前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要 ...
- 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 ...
- 前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要跳转 ...
- 关于p标签不能嵌套div标签引发的标签嵌套问题总结
问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...
随机推荐
- 迅为7寸工业触摸屏嵌入式平台可用于ARM嵌入式一体机
7寸触摸屏介绍产品名称:7寸IPS高清屏幕分辨率:1280*800触摸屏类型:电容屏(五点触摸)接线方式: FPC 可应用于嵌入式一体机.自动售货机.广告机.智能自动终端.零售终端等 ARM平台处理器 ...
- 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. ...
- swift 语言评价
杂而不精,一团乱麻!模式乱套,不适合作为一门学习和研究语言. 谢谢 LZ 介绍,看完之后更不想用 Swift 了.从 C++那里抄个 V-Table 来很先进嘛?别跟 C++一样搞什么 STL 就好了 ...
- Java软件开发不同薪资级别-技术要求
15~20万 WEB应用服务器(Tomcat.Weblogic.Jetty.JBoss.WebSphere) NoSQL(Redis.MongoDB.HBase.Memcache) 消息中间件(Kaf ...
- python连接mysql的操作
一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可. Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的l ...
- 类的封装,property特性,类与对象的绑定方法和非绑定方法,
类的封装 就是把数据或者方法封装起来 为什么要封装 封装数据的主要原因是:保护隐私 封装方法的主要原因是:隔离复杂度(快门就是傻瓜相机为傻瓜们提供的方法,该方法将内部复杂的照相功能都隐藏起来了,比如你 ...
- Dynamic Web Module版本对应tomcat版本
MyEclipse2017+JDK 1.8环境下 Dynamic Web Module版本3.1要对应tomcat7.0以上版本,不然部署项目时会出现错误(会出现无法部署项目的情况). Dynamic ...
- Failed to resolve filter报错原因
问题 页面写过滤器,控制台报错,Failed to resolve filter 分析 语法错误?先检查 ``` {{ params | filterA }} filters: { filterA: ...
- 零基础入门学习Python(26)--字典:当索引不好用时2
知识点 删除字典元素 能删单一的元素也能清空字典,清空只需一项操作. 显示删除一个字典用del命令,如下: >>> dict1 = {'a':1,'b':2,'c':3} >& ...
- private关键字
Student.java /* * 学生类 * * 通过对象直接访问成员变量,会存在数据安全问题 * 这个时候,我们就想能不能不让外界对象直接访问成员变量呢? * 答案:能 * 如何实现呢? * pr ...