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. 用cesium本身添加水纹效果

    参考网站:https://blog.csdn.net/XLSMN/article/details/78752669 1.首先来看一下整体效果 2.具体方法如下: 首先,你必须有两张很重要的图片,你可以 ...

  2. go protobuf 编码与解码

    package main import ( "encoding/hex" "fmt" "github.com/golang/protobuf/prot ...

  3. Servlet中的几个重要的对象（转）

    讲解四大类,ServletConfig对象,ServletContext对象.request对象,response对象 ServletConfig对象 获取途径:getServletConfig(); ...

  4. [Python3网络爬虫开发实战] 2.1-HTTP基本原理

    在本节中,我们会详细了解HTTP的基本原理,了解在浏览器中敲入URL到获取网页内容之间发生了什么.了解了这些内容,有助于我们进一步了解爬虫的基本原理. 1. URI和URL 这里我们先了解一下URI和 ...

  5. ubuntu 14.04上源码编译安装php7

    wget https://downloads.php.net/~ab/php-7.0.0alpha2.tar.bz2 //用winscp把下载好的文件上传到网站中 tar jxf php-7.0.0a ...

  6. FFmpeg加水印

    ffmpeg中文水印乱码两种原因 1.字符编码格式原因,中文必须是utf8编码格式的(我遇到的问题,在vs2013上写的中文,已做编码格式转码,放到centos7.2上编译运行也会出现中文乱码的问题, ...

  7. echarts的简单应用之（二）饼图

    接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...

  8. STM32F407 GPIO原理 个人笔记

    datasheet(STM32F407ZGT6.pdf)中,IO structure 为FT,表示容忍5V电压 后面的uart1_TX之类,表示端口复用 共有A~G7组IO口, 每组16个IO口:0~ ...

  9. Python安装配置

    Python下载 官网下载地址:https://www.python.org/downloads/windows/ 下载安装包: python-3.5.0-amd64(64位).exe python- ...

  10. 九度oj 题目1058：反序输出

    题目1058:反序输出 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:9677 解决:3495 题目描述: 输入任意4个字符(如:abcd), 并按反序输出(如:dcba) 输入: 题目可 ...