html – 没有任何空格

html – 没有任何空格,第1张

概述我试图在< td>内并排放置两个图像. (也为每个img尝试了一个< td>),但在图像之间有一些空白区域,并且不明白它们来自哪里..我可以使用float解决我的问题,但我试图避免这种情况.如果有人能向我解释为什么会这样.我从其他问题中得到了一些提示,但它不起作用. 这是我的代码: <html><head> <style "text/css"> td, tr, img 我试图在< td>内并排放置两个图像. (也为每个img尝试了一个< td>),但在图像之间有一些空白区域,并且不明白它们来自哪里..我可以使用float解决我的问题,但我试图避免这种情况.如果有人能向我解释为什么会这样.我从其他问题中得到了一些提示,但它不起作用.

这是我的代码:

<HTML><head>    <style "text/CSS">        td,tr,img  { padding: 0px; margin: 0px; border: none; }        table { border-collapse: collapse;}     </style></head><body >    <center>        <table cellspacing="0" cellpadding="0">            <tr>                <td>                    <img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />                </td>            </tr>            <tr>                <td>                    <img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>                    <img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>                </td>            </tr>        </table>    </center></body>

您可以注意到顶部图像的高度为800像素,而其他图像的高度为400像素,我需要的是某种方形,图像之间没有任何空格.

解决方法 imgs是内联元素.图像之间的水平空间来自HTML中图像之间的空白.与字符 here之间有空格的原因相同.

因此,要解决此问题,请删除空格:http://jsfiddle.net/xMW7N/2/

垂直空间也是因为图像是内联元素.间隙是为g和j等字母中的下行器保留的空间.

要解决此问题,请在img:http://jsfiddle.net/xMW7N/3/上设置vertical-align:top

虽然在你的情况下(如你的问题所述),设置float:left工作正常:http://jsfiddle.net/xMW7N/4/

这是因为浮动:左侧强制显示:阻止,因此解决了由内联图像引起的所有问题.

总结

以上是内存溢出为你收集整理的html – 没有任何空格全部内容,希望文章能够帮你解决html – 没有任何空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1103869.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存