Question

我正在尝试使用表格构建新闻稿（我必须使某些电子邮件客户端忽略div框等）。

我遇到的问题是，我希望将文本“测试测试”放在相同的高度上，就像它留给它的图片一样。并且蓝色按钮也应该在同一高度。我从Photoshop布局中制作了一张照片，它应该是什么样子，并且在js小提琴上，所以你看看它现在是怎样的。

<tr style="background-color:#deeef4;">
    <td width="250" cellpadding="0" colspan="2" valign="top" style="padding:15px 25px;">
        <p style="display:inline;color:#00668a;">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span>
        </p>
        <br>
        <img src="http://www.awesom-media.de/linie.png">
    </td>
    <tr style="background-color:#deeef4;">
        <td width="300" style="padding:10px 25px;display:inline;">
            <img src="http://www.awesom-media.de/ab1.jpg">
        </td>
        <td width="400" style="text-align:left">
            <p>Test Test</p>
            <ul>
                <li>7 Tage Aufenhthalt inkl. Frühstück</li>
                <li>6-Tages-Skipass für die Skiregion Obertauern</li>
            </ul><a href="#"><img src="http://www.awesom-media.de/button.png" width="345" height="35" border="0"></a>
        </td>
    </tr>
</tr>

jsfiddle

http://i62.tinypic.com/33vhvli.png

Answer 1

这是由于p默认display:block属性，默认情况下需要一些余量。

将其更改为display:inline，您也可以删除margin-top

p{
  display:inline;
  margin-top : 0px
}

Js Fiddle Demo

对于图片按钮，您可以添加margin-top style="margin-top:15px"

Answer 2

我更新了你的JSFiddle：http://jsfiddle.net/sBaNL/1/

我做了两件事：

从<p>

Test Text

让周围的<td>垂直对齐其内容：

<td width="400" style="text-align:left; vertical-align: top;">
    <p style="margin-top: 0px;">Test Test </p>
    ...
</td>

Answer 3

要避免所有这些不必要的边距，填充等所有元素，请在css文件的开头执行以下操作

*：{余量：0像素;填充：0像素; ...}

这将覆盖所有浏览器的默认属性。

文本有保证金，但没有给出保证金

3 个答案: