Comment résoudre ce problème d'espace entre les images en HTML?

ExigenceComment résoudre ce problème d'espace entre les images en HTML?

Je veux créer une image avec plusieurs hyperliens sur elle et l'envoyer à quelqu'un.

Ce que j'ai

J'utilise la méthode de découpage en tranches de Photoshop et a ajouté URL aux tranches. J'ai enregistré la composition pour le web. Pour que cela fonctionne à la fin de mon destinataire, j'ai téléchargé chaque tranche sur un site Web d'hébergement de photos en ligne et édité le tag HTML img src = "local photo location" à img src = "emplacement de photo en ligne". Mais le problème est que je reçois plusieurs espaces blancs entre chaque tranche qui déforme l'image globale.

code

<html> 
 
    <head> 
 
    <title>General Infosheet July 25</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
    <!-- Save for Web Slices (General Infosheet July 25.jpg) --> 
 
    <table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td> 
 
       <a href="http://facebook.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td> 
 
      <td rowspan="2"> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="4"> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="http://twitter.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="http://instagram.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="http://photobucket.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td> 
 
     </tr> 
 
    </table> 
 
    <!-- End Save for Web Slices --> 
 
    </body> 
 
    </html>

Question

Je veux enlever l'espace blanc entre les images. Veuillez fournir des modifications de code qui aideront à supprimer ces espaces blancs.

Source

2016-07-28 Shrijan Aryal

Jeter le code. Commencer à partir de zéro. N'utilisez pas de tableaux pour la mise en page. Ce n'est pas 1997. CSS est maintenant bien supporté par les navigateurs web. N'écrivez pas non plus HTML invalide: http://validator.w3.org/nu/ – Quentin

l'image contient l'espace blanc –

@Quentin: La question mentionne l'email, pas les navigateurs web. Les tags doivent être corrigés. –

Réponse

j'ai pu résoudre ce problème en examinant la section du corps de l'e-mail Hotmail, puis coller tout le code HTML dans l'inspecteur. De cette façon, le code n'est pas interprété par Outlook, mais plutôt par le moteur du navigateur Web. Donc, cela pourrait être une solution résolue pour quiconque tente d'envoyer un code HTML complexe.

Source

2016-08-02 19:13:09

Vous pouvez accepter votre propre réponse à noter que la question a une solution .... –

Assurez-vous que le remplissage pour chaque cellule de table est 0px, puis définissez la propriété border-spacing sur 0 et la propriété border-collapse sur collapse. Les tables par défaut ont un espacement, ce qui donne des espaces.

Source

2016-07-28 14:09:29

Comment résoudre ce problème d'espace entre les images en HTML?

Répondre

Questions connexes