Question

https://digitalitem.trade/shop/product/pc/windows-10/sea-of-thieves/ 底部的表格是添加一些填充;使文字脱节...我不知道为什么？

<div class="celwidget aplus-module module-4">
  <div class="a-expander-collapsed-height a-row a-expander-container a-expander-partial-collapse-container" aria-live="polite" data-a-expander-name="aplus-module-expander" data-a-expander-collapsed-height="700">
    <div class="a-expander-content a-expander-partial-collapse-content" aria-expanded="false">
      <div class="aplus-module-wrapper">
        <div class="apm-spacing">
          <div class="apm-floatleft">
            <h3 class="a-spacing-small a-color-secondary">Sea of Thieves offers something for everyone, no matter how they like to play:</h3>
            <div class="a-spacing-extra-large">
              <div class="apm-spacing">
                <table class="apm-fixed-width a-spacing-mini apm-fourthcol-table">
                  <tbody>
                    <tr>
                      <th class="apm-center">
                        <div class="apm-fourthcol">

                          <img src="https://i.imgur.com/UMdg1zv.png" alt="" width="220" />

                        </div>
                      </th>
                      <th class="apm-center">
                        <div class="apm-fourthcol">

                          <img src="https://i.imgur.com/o6iR7pN.png" alt="" width="220" />

                        </div>
                      </th>
                      <th class="apm-center">
                        <div class="apm-fourthcol">

                          <img src="https://i.imgur.com/KOmLejc.png" alt="" width="220" />

                        </div>
                      </th>
                      <th class="apm-center">
                        <div class="apm-fourthcol">

                          <img src="https://i.imgur.com/fJh5o2J.png" alt="" width="220" />

                        </div>
                      </th>
                    </tr>
                    <tr>
                      <td width="220" class="apm-top">
                        <div class="apm-fourthcol">
                          <h4 class="a-spacing-mini">A world of exploration</h4>
                          <p class="a-size-small">set sail upon a vast, open ocean, venturing into new regions and discovering the secrets of unspoiled islands and sunken ships. Hunt for treasure by following maps and untangling riddles, and learn to expect the unexpected...</p>
                        </div>
                      </td>

                      <td width="220" class="apm-top">
                        <div class="apm-fourthcol">
                          <h4 class="a-spacing-mini">A world of excitement</h4>
                          <p class="a-size-small">engage in ship-to-ship crew battles with cannon, pistol and cutlass, pursuing rival ships through raging storms. Sail in pursuit of deadly bounties or ferry cargo through hostile waters. Clash with the skeletal remains of cursed
                            former pirates and beware undersea menaces that lurk beneath the waves!</p>
                        </div>
                      </td>

                      <td width="220" class="apm-top">
                        <div class="apm-fourthcol">
                          <h4 class="a-spacing-mini">A world we sail together</h4>
                          <p class="a-size-small">whether you’re playing alongside friends, matchmaking to find a crew or setting out as a ‘lone wolf’ pirate, you’ll have hilarious, memorable encounters in a world where every sail on the horizon is a crew of real players.</p>
                        </div>
                      </td>

                      <td width="220" class="apm-top">
                        <div class="apm-fourthcol">
                          <h4 class="a-spacing-mini">A world of achievement</h4>
                          <p class="a-size-small">on your quest to become a pirate legend you’ll amass loot, build a reputation and customize your ship (and yourself) with your hard-earned rewards.</p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这来自https://www.amazon.com/Sea-Thieves-Xbox-One/dp/B00ZPT59YS/ 只需使用视觉输入将其粘贴到wordpress中我裁剪了原始图像，以删除亚马逊使用的空白垂直空间;裁剪图像之前存在问题。

Answer 1

由于某些文字比其他文字长，并且<td>中的<th>和<table>使用vertical-align:middle;作为默认属性，因此文本会在{{{ 1}}。这不会 meen“它会添加填充”。

你可以通过将它添加到你的css来修复它：

<td>

或：

td, th {
    vertical-align: top;
}

请点击此处获取更多信息：https://developer.mozilla.org/de/docs/Web/CSS/vertical-align

由于HTML结构中已有的CSS类，您也可以使用它们。 tr { vertical-align: top; }＆amp; .apm-top{vertical-align: top;}

段：

.apm-middle{vertical-align: middle;}

Answer 2

使用html样式添加vertical-alingn：top内联

<td style="vertical-align:Top">

为什么要添加填充

2 个答案: