Блог

У меня проблема с моим интервалом. У меня есть <p> ‘s в моем коде, но между ними есть огромный пробел. Я хотел поместить их в таблицу в разных <tr> s, но это не сработало, поэтому я поместил их оба в одно и то же <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>
  

[

У вас есть 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>