html - 为什么要添加填充

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 我裁剪了原始图像以删除亚马逊使用的空白垂直空间；该问题在裁剪图像之前就存在。

标签： htmlcss

Answer 1

由于某些文本比其他文本长，并且<td>和<th>作为默认属性，文本在 . 中垂直<table>居中。这并不意味着“它添加了填充”。vertical-align:middle;<td>

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

td, th {
    vertical-align: top;
}

或者：

tr {
    vertical-align: top;
}

请参阅此处了解更多信息：https ://developer.mozilla.org/de/docs/Web/CSS/vertical-align

由于您的 HTML 结构中已经存在 CSS 类，您也可以使用它们。.apm-top{vertical-align: top;}&.apm-middle{vertical-align: middle;}

片段：

<style>
.apm-center{
vertical-align:middle;
}

.apm-top{
vertical-align:top;
}
</style>

<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>