删除网页上的空格(边距)

时间:2020-09-28 04:14:37

标签: html css margin

我的间距有问题。我必须在代码中使用<p>,但是两者之间有很大的空间,我想将它们放在不同<tr>中的表中,但这是行不通的,因此我将它们都放在在相同的<tr><td>中,但间距仍在此处。这是代码和照片(忽略有关甘菊和茶的漫长讨论):

 <table style="border-style: none; margin:0 auto; white-space: pre-wrap;">
    <tr>
      <td>
        <div class="tisane" style="border-style: groove; border-radius: 6%; max-width: 308px; max-height: 358px;">
            <img src="images/30467-5-tea.png" style="width: 300px; height: 200px;" alt="Tisane à la chamomille">
        </div>
      </td> 
      <td style="max-height: 40px;">
        <a href="Millepertuis.html"><img src="images/272222649004211.png" style="width: 200px; height: unset; right: 20px; top: 170px; padding: 20px; position: absolute;"></a>
        <a href="tisanes.html"><img src="images/272222649004211.png" style="width: 200px; height: unset; left: 20px; top: 170px; padding: 20px; position: absolute; transform: scaleX(-1);"></a>
      </td>
    </tr>
    <tr style="height: 40px; max-height: 40px;">
      <td style="max-height: 20px;">
        <p class="normaltext" style="text-align: center; padding: 0px; margin-top: 0px; margin-bottom: 0px; font-size: 30px; border: 0px;">Tisane à la chamomille</p> 
          <p class="arial" style="width: 430px; white-space: pre-line; text-align: center; word-wrap: break-word; font-size: 18px; top: 0px; position: relative;">
            Depuis toujours, l'homme utilise la chamomille en la consommant pour ses vertus calmantes et digestives, et de nombreuses autres façons. Retrouvez toute cette puissance sous sa forme la plus savoureuse dans notre infusion faite uniquement des pétales les plus qualitatifs.
          </p>
      </td>
    </tr>
    
</table>

html

[enter image description here

enter image description here

1 个答案:

答案 0 :(得分:2)

white-space: pre-wrap;几乎到处都有,但您希望该区域正常。我添加了white-space: normal;,它的显示与预期的一样(不包括您的本地图片)。

<table style="border-style: none; margin:0 auto; white-space: pre-wrap;">
  <tr>
    <td>
      <div class="tisane" style="border-style: groove; border-radius: 6%; max-width: 308px; max-height: 358px;">
        <img src="images/30467-5-tea.png" style="width: 300px; height: 200px;" alt="Tisane à la chamomille">
      </div>
    </td>
    <td style="max-height: 40px;">
      <a href="Millepertuis.html"><img src="images/272222649004211.png" style="width: 200px; height: unset; right: 20px; top: 170px; padding: 20px; position: absolute;"></a>
      <a href="tisanes.html"><img src="images/272222649004211.png" style="width: 200px; height: unset; left: 20px; top: 170px; padding: 20px; position: absolute; transform: scaleX(-1);"></a>
    </td>
  </tr>
  <tr style="height: 40px; max-height: 40px;">
    <td style="max-height: 20px; white-space: normal;">
      <p class="normaltext" style="text-align: center; padding: 0px; margin-top: 0px; margin-bottom: 0px; font-size: 30px; border: 0px;">Tisane à la chamomille</p>
      <p class="arial" style="width: 430px; white-space: pre-line; text-align: center; word-wrap: break-word; font-size: 18px; top: 0px; position: relative;">
        Depuis toujours, l'homme utilise la chamomille en la consommant pour ses vertus calmantes et digestives, et de nombreuses autres façons. Retrouvez toute cette puissance sous sa forme la plus savoureuse dans notre infusion faite uniquement des pétales
        les plus qualitatifs.
      </p>
    </td>
  </tr>

</table>

相关问题