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. Importing Objective-C into Swift

    Overview You can use Objective-C and Swift files together in a single project, no matter which langu ...

  2. 前端入门22-讲讲模块化 包括webstrom建立简单ES6

    https://www.cnblogs.com/dasusu/p/10105433.html

  3. C# 如何发送Http请求

    HttpSender是一个用于发送Http消息的轻量C#库,使用非常简单,只需要一两行代码,就能完成Http请求的发送 使用 Nuget,搜索 HttpSender 就能找到这个库 这个库的命名空间是 ...

  4. 01CSS使用方法

    CSS使用方法 内联定义 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性. 内部样式表 <style type=＂text/css＂></style> ...

  5. Redux的中间件Middleware不难，我信了^_^

    Redux的action和reducer已经足够复杂了,现在还需要理解Redux的中间件.为什么Redux的存在有何意义?为什么Redux的中间件有这么多层的函数返回?Redux的中间件究竟是如何工作 ...

  6. 2018湖南省第14届大学生计算机程序设计竞赛 D: 卖萌表情

    Description 已知以下 4 种都是卖萌表情(空白的部分可以是任意字符.竖线是便于展示的分隔符,没有实际意义): ^ ^ | ^ | < | > v | v v | > | ...

  7. 笔试算法题（16）：二叉树深度计算 & 字符串全排列

    出题:要求判断二元树的深度(最长根节点到叶节点的路径): 分析:二元递归不容易使用循环实现 解题: struct Node { int value; Node *left; Node *right; ...

  8. [Python3网络爬虫开发实战] 1.2.4-GeckoDriver的安装

    上一节中,我们了解了ChromeDriver的配置方法,配置完成之后便可以用Selenium驱动Chrome浏览器来做相应网页的抓取. 那么对于Firefox来说,也可以使用同样的方式完成Seleni ...

  9. LVS-NAT负载均衡PHP应用（Wordpress、Discuz）

    1 实验拓扑 2 需求 RS-01和RS-02对外提供WEB服务. RS-01搭建LAMP,PHP通过http模块方式提供. RS-02搭建LAMP,PHP通过fpm方式提供. RS-01和RS-02 ...

  10. python3.x Day5 异常处理

    异常处理: 预计可能会发生的异常,明确如果发生,如何处理,不过一般不参与业务逻辑,也不要一次性捕捉全部异常,不然可能程序就不可控了. data={} mmm=[] try: #捕获异常, data[& ...