请查看我的HTML电子邮件并告诉我为什么<；td>；是弯曲的吗？

这是一封HTML电子邮件，我正在为练习而编写，我无法整理最后一张图片

这是这个表的HTML

.smallimg{
宽度：295px；
显示：内联块；
边界：0；
边框样式：无；
填充：20px 0px 0px 0px；
保证金：自动；
}
.bold{
位置：相对位置；
顶部：20px；
字体大小：24px；
字体系列：“蒙特塞拉特”，helvetica，arial，无衬线；
字体大小：1000；
文本对齐：居中；
线高：0；
}

Stratocaster®型号
Telecaster®型号

Jazzmaster®型号

贝斯

表格单元格自动对齐。 因为左下单元的高度更大，所以它旁边的单元会自动居中

---

您可以通过添加

垂直对齐：top到您的
td
 好了，伙计们，我修好了！如果你好奇的话，这里是最终结果


以下是HTML：

<table>

        <tr> 
            <td>
                    <a href='https://www.guitarcenter.com/Fender-American-Ultra-Stratocaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85' target ='_blank'><img src='stratocaster.jpg' class='smallimg'></a> <div class='bold'> <b>Stratocaster <sup class='trademark'>®</sup> <p> Models</p></b> <a href='https://www.guitarcenter.com/Fender-American-Ultra-Stratocaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85' class='bold'></a> <p><a href='https://www.guitarcenter.com/Fender-American-Ultra-Stratocaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85' class='red'> Shop Now</p></a></div> 
            </td>
            <td>
                    <a href='https://www.guitarcenter.com/Fender-American-Ultra-Telecaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85'target ='_blank'><img src='telecaster.jpg' class='smallimg'></a> <div class='bold'> <b>Telecaster <sup class='trademark'>®</sup> <p> Models</p></b> <p><a href='https://www.guitarcenter.com/Fender-American-Ultra-Telecaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85' class='red'> Shop Now</a></div>
            </td>
        </tr>

        <tr>
            <td>
                    <a href='https://www.guitarcenter.com/Fender-American-Ultra-Jazzmaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85'target ='_blank'><img src='jazzmaster.jpg' class='smallimg'></a> <div class='bold'> <b>Jazzmaster <sup class='trademark'>®</sup> <p> Models </p></b><p><a href='https://www.guitarcenter.com/Fender-American-Ultra-Jazzmaster-Guitars.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85' class='red'>&nbsp; Shop Now</p></a></div>
            </td>
            <td>
                <!-- Here is the code for the bass img -->
                    <a href='https://www.guitarcenter.com/Fender-American-Ultra-Basses.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85'target ='_blank'><img src='BASS.jpg' class='smallimg'></a> <div class='bold'><b>Basses</b> <p><a href='https://www.guitarcenter.com/Fender-American-Ultra-Basses.gc?source=4TP9LHBA&dtm_em=d6a9d8b391c15fbb2e0fb42983408d85' class='red'> Shop Now </a><p>&nbsp;</p></div>  
            </td>
        </tr>

    </table>

您丢失了一个p标记：
模型
，但不在最后一个单元格中。您的打开和关闭
p
和
a
标记不匹配：
。
应该是
。
一个有用的在线工具：将表格代码插入body标记中，并查看警告信息……实际上，HTML代码中有输入错误，这是应该首先解决的问题。；）
td{
    vertical-align: top;
}

.smallimg{
    width:295px;
    display:inline-block;
    border:0;
    border-style:none;
    padding:20px 0px 0px 0px;
    margin:auto;
    vertical-align: top;

}

.bold{
    position: relative;
    top:20px;
    font-size:24px;
    font-family:'Montserrat',helvetica,arial,sans-serif;
    font-weight:1000;
    text-align:center;
    line-height:0;
}