Search code examples
htmlcssmargin

Removing spaces (margins) on a web page

I have a problem with my spacing. I have to <p>'s in my code, but there is a huge space between both I wanted to put them in a table in different <tr>s, but it would not work, so I put them both in the same <tr> and <td>, but the spacing is still here. Here are the code and photos (ignore the long talk about chamomil and tea) :

 <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

Solution

  • You have white-space: pre-wrap; nearly everywhere but you want it to be normal in that area. I've added white-space: normal; and it is showing as expected (excluding your local images).

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