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>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...
随机推荐
- opencv实现人脸,人眼,微笑检测
1.首先实现人脸检测 import cv2 img = cv2.imread("people.jpg",1) #读入图像 #导入人脸级联分类器引擎,“.xml”文件里包含了训练出来 ...
- webgl 的空间变换(下):空间变换
在网上看了很多关于在三维世界中怎么把一个顶点经过一步步变化,最终呈现在我们的屏幕上的. 其实很多博客或者书籍已经讲的很清楚了,那为什么我还要特别再写一次博客来阐述自己观点呢?(这里只针对那些学习web ...
- 正则表达式,匹配查找函数(preg_match_all)flags参数对比
格式: int preg_match_all ( string pattern, string subject, array matches [, int flags] ) 参数 flags 选项有以 ...
- java将很长的一条sql语句,自动换行输出(修改版)2019-06-01(bug未修复)
package org.jimmy.autosearch2019.test; import java.util.HashMap; public class AutoLinefeedSql { publ ...
- 启动myeclipse弹窗Please allow Subclipse team to receive anonymous usage statistics for this Eclipse intance
Please allow Subclipse team to receive anonymous usage statistics for this Eclipse intance(翻译:请允许Sub ...
- pep8摘要
https://www.python.org/dev/peps/pep-0008/ #!/usr/bin/python # -*- coding:utf- -*- # @filename: pep_s ...
- 笔试算法题(15):-1到N中包含1的数字的个数 & 连续和为N的序列
出题:输入一个整数N,求从1到N这N个整数的十进制表示中‘1’出现的次数: 分析: 从左向右处理string表示的数字:当前数字长度为n,判断最左边一位数字字符: 如果是0,则直接递归下一位: 如果是 ...
- Layui表格之动态添加数据(表格多选解决方案)
前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...
- SVN CommandLine
要是SVN命令行用不了的话: 1.SVN装了没? 2.SVN安装时,选项“command line client tools”选了没. 检出: svn checkout [-depth ARG] [- ...
- 升级openssh踩得坑
升级背景: 项目中使用的系统为CentOS6.8,经过漏洞扫描后发现openssh高危漏洞,具体描述如下:OpenSSH 7.2p2之前版本, sshd/ session.c/ do_setup_en ...