【问题标题】:Getting a margin on HTML Table images在 HTML 表格图像上获得边距
【发布时间】:2019-03-11 01:18:02
【问题描述】:

我不确定这个额外的间距是从哪里来的。当它是每行一个图像时确实是一个问题,但是当它是多个时,它会把事情搞砸

我已经尝试了一段时间试图删除它,但无法弄清楚

    <html>
    	<head></head>
    	<body>
    		<table border="0" cellspacing="0" cellpadding="0"   style="table-layout: fixed; margin: 0px auto; ">
    			<tr>
    				<td align="center" colspan="5" valign="center">
    					<a href="https://www.lasvegasnow.com/open-enrollment-forum"><img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/header_1538749577392_57983134_ver1.0.jpg" style = "display: block; width: 600px;"></a>
    				</td>
    			</tr>
    			<tr>
    				<td align="center" colspan="5">
    					<img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/fbl_1538747453659_57975885_ver1.0.jpg" style = "display: block; width: 600px;">
    				</td>
    			</tr>
    			<tr>
    				<td align="center" colspan="1" cellspacing="0" cellpadding="0">
    					<img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/3_1_1538747262360_57975876_ver1.0.jpg" style = "display: block; width: 90px; height: 34px;">
    				</td>
    				<td align="center" colspan="1">
    					<img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/btn1_1538747262364_57975877_ver1.0.jpg" style = "display: block; width: 153px; height: 34px;">
    				</td>
    				<td align="center" colspan="1">
    					<img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/3_2_1538747263511_57975878_ver1.0.jpg" style = "display: block; width: 109px; height: 34px;">
    				</td>
    				<td align="center" colspan="1">
    					<img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/btn2_1538747263651_57975879_ver1.0.jpg" style = "display: block; width: 155px; height: 34px;">
    				</td>
    				<td align="center" colspan="1">
    					<img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/3_3_1538747264518_57975880_ver1.0.jpg" style = "display: block; width: 93px; height: 34px;">
    				</td>
    			</tr>
    			<tr>
    				<td align="center" colspan="4">
    					<img src="email_blast_04.jpg" style = "display: block; width: 600px;">
    				</td>
    			</tr>
    			<tr>
    				<td align="center" colspan="4">
    					<img src="email_blast_05.jpg" style = "display: block; width: 600px;">
    				</td>
    			</tr>
    			<tr>
    				<td align="center" colspan="4">
    					<img src="email_blast_06.jpg" style = "display: block; width: 600px;">
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

【问题讨论】:

  • 你能发布产生这个的代码吗?这将帮助其他人诊断您的问题:)
  • 就在上面。我本来就在那里,但是当我最初发布它时点击了一些东西来删除它
  • 您可以发布任何与此相关的 CSS 吗?还是只是纯 HTML?此外,代码 sn-p 没有找到一些仍然难以诊断的图像。
  • 没有 CSS。我将编辑 sn-p
  • 您的代码没有问题,这些边距来自两个块上方的图像。尝试仅在具有白色背景的 html 中加载图像,您将看到它。 https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/fbl_1538747453659_57975885_ver1.0.jpg

标签: html html-table html-email


【解决方案1】:
 <head></head>
<body>
    <table border="0" cellspacing="0" cellpadding="0"   style="table-layout: fixed; margin: 0px auto; ">
        <tr>
            <td align="center" colspan="5" valign="center">
                <a href="https://www.lasvegasnow.com/open-enrollment-forum"><img src="header.jpg" style = "display: block; width: 600px;"></a>
            </td>
        </tr>
        <tr>
            <td align="center" colspan="5">
                <img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/fbl_1538747453659_57975885_ver1.0.jpg" style = "display: block; width: 600px;">
            </td>
        </tr>
        <tr>
            <td align="center" colspan="1" cellspacing="0" cellpadding="0">
                <img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/3_1_1538747262360_57975876_ver1.0.jpg" style = "display: block; width: 90px; height: 34px;">
            </td>
            <td align="center" colspan="1">
                <img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/btn1_1538747262364_57975877_ver1.0.jpg" style = "display: block; width: 153px; height: 34px;">
            </td>
            <td align="center" colspan="1">
                <img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/3_2_1538747263511_57975878_ver1.0.jpg" style = " width: 51px; height: 34px;">
            </td>
            <td align="center" colspan="1">
                <img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/btn2_1538747263651_57975879_ver1.0.jpg" style = "display: block; width: 155px; height: 34px;margin-right: 23px;">
            </td>
            <td align="center" colspan="1">
                <img src="https://media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/3_3_1538747264518_57975880_ver1.0.jpg" style = "display: block; width: 93px; height: 34px;">
            </td>
        </tr>
        <tr>
            <td align="center" colspan="4">
                <img src="email_blast_04.jpg" style = "display: block; width: 600px;">
            </td>
        </tr>
        <tr>
            <td align="center" colspan="4">
                <img src="email_blast_05.jpg" style = "display: block; width: 600px;">
            </td>
        </tr>
        <tr>
            <td align="center" colspan="4">
                <img src="email_blast_06.jpg" style = "display: block; width: 600px;">
            </td>
        </tr>
    </table>
</body>

【讨论】:

  • 由于使用的图像有非常小的空白空间,因此空白空间可能非常小..您可以尝试使用更多图像....
  • 希望这是您正在寻找的答案
  • 它看起来更好,但我仍然看到图像周围的边距。你做了什么改变?
  • 我已经在最右边的图像中添加了 margin-right ,并从包含白色图像的中心 td 中删除了 'display : block '。如果你在问由于图像“media.lasvegasnow.com/nxsglobal/lasvegasnow/photo/2018/10/05/…”而看到的图像如果您看到此图像,则底部有边距,如果您可以获得一些没有边距的图像,则不会出现此问题跨度>
猜你喜欢
  • 2013-01-21
  • 1970-01-01
  • 2013-02-03
  • 1970-01-01
  • 2021-09-17
  • 2018-04-16
  • 1970-01-01
  • 2017-12-23
  • 2018-03-31
相关资源
最近更新 更多