Wie behebt man dieses Leerzeichen zwischen Bildern in HTML?

AnforderungWie behebt man dieses Leerzeichen zwischen Bildern in HTML?

ich auf sie ein Bild mit mehreren Hyperlinks erstellen möchten und es jemand eine E-Mail.

Was ich tat

verwendete ich Photoshop Slicing-Methode und das hinzugefügt URL zu den Scheiben. Ich habe die Komposition für das Web gespeichert. Damit es am Ende meines Empfängers funktioniert, habe ich jedes Segment auf eine Online-Foto-Hosting-Website hochgeladen und das HTML-Tag img src = "lokaler Fotostandort" img src = "Online-Fotostandort" bearbeitet. Aber das Problem ist, dass ich mehrere weiße Zwischenräume zwischen jeder Scheibe bekomme, die das Gesamtbild verzerren.

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

Frage

Ich weiß-Raum zwischen den Bildern entfernen möchten. Bitte geben Sie Code-Änderungen an, mit denen Sie diesen Leerraum entfernen können.

Quelle

2016-07-28 Shrijan Aryal

Werfen Sie den Code aus. Von vorne anfangen. Verwenden Sie keine Tabellen für das Layout. Dies ist nicht 1997. CSS wird jetzt von Webbrowsern gut unterstützt. Auch schreiben Sie nicht ungültig HTML: http://validator.w3.org/nu/ – Quentin

das Bild enthält den Leerraum –

@Quentin: Die Frage erwähnt E-Mail, nicht Web-Browser. Die Tags sollten behoben sein. –

Antwort

konnte ich dieses Problem lösen, indem den Körperabschnitt der E-Mail in Hotmail Inspektion und dann im Inspektoren gesamten HTML-Code einfügen. Auf diese Weise wird der Code nicht von Outlook, sondern von der Webbrowser-Engine interpretiert. Also könnte dies eine resolute Lösung für jeden sein, der versucht, komplexen HTML-Code per E-Mail zu versenden.

Quelle

2016-08-02 19:13:09

Sie können Ihre eigene Antwort akzeptieren, um festzustellen, ob die Frage eine Lösung hat .... –

Stellen Sie sicher, dass die Auffüllung für jede Tabellenzelle 0px ist, und legen Sie die border-spacing-Eigenschaft auf 0 und die border-collapse-Eigenschaft auf collapse fest. Standardmäßig haben Tabellen Leerzeichen, was zu Leerzeichen führt.

Quelle

2016-07-28 14:09:29

Wie behebt man dieses Leerzeichen zwischen Bildern in HTML?

Antwort

Verwandte Themen