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. log4net小记

    log4net添加: Install-Package Log4net log4net.config配置: <?xml version="1.0" encoding=" ...

  2. oracle数据库使用hint来让模糊查询走索引

    在没有创建数据直方图之前,查询优化器是cbo,可能不会选择代价最低(效率最高)的方式查询. 先创建表 --日语假名表 CREATE TABLE JAPANESE_SOUNDMARK ( ID INTE ...

  3. 08C#事件

    C#事件 1.2      事件 事件是C#语言内置的语法,可以定义和处理事件,为使用组件编程提供了良好的基础. 1.16.1       事件驱动 Windows操作系统把用户的动作都看作消息,C# ...

  4. hdfs深入：08、hdfs的JavaAPI以及如何解决winutils的问题

    /** * 通过url注册的方式访问hdfs,了解,不会用到 * @throws Exception */ 以下为详细代码://1.注册hdfs的url,让java代码能识别hdfs的url形式URL ...

  5. 新引入thinkphp报错“应用目录[./Application/]不可写，目录无法自动生成！ 请手动生成项目目录~”

    新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”, 其主要原因是文件夹的权限问题,手动将项目文件夹权限更改为可读可写就OK,具体操 ...

  6. http主要请求头

    一.内容协商 1.Accept:希望服务器返回的数据格式,如下面的:text/javascript, application/javascript, application/ecmascript, a ...

  7. 阿里云ubuntu服务器安装使用mysql并配置远程连接记录

    实践2要继续做实践1的项目 项目在本地使用本地数据库对于团队开发来说太麻烦了 所以改把项目放在服务器上使用服务器数据库 进入主题 0.参考:https://www.cnblogs.com/ywf520 ...

  8. Python之条件 循环和其他语句 2014-4-6

    #条件 循环和其他语句 23:30pm-1:431.print和import的更多信息 使用逗号将多个表达式输出 >>> print 'age:',42 age: 42 >&g ...

  9. BNUOJ 7697 Information Disturbing

    Information Disturbing Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on HDU. ...

  10. poj 1330lca模板题离线算法

    #include<iostream> #include<vector> using namespace std; const int MAX=10001; int pre[MA ...