は、上部と下部の画像に余分な隙間があります見通し

見通しデスクトップアプリで

（2010および2013）に上部と下部の画像の間隔を削除します。は、上部と下部の画像に余分な隙間があります見通し

マージンやパディングのように見えますが、うまくいきませんでした。私は別のハックやソリューションも試しました（テーブルセルのライン高さの設定、テーブルセルの空白の削除、周囲のdivの削除、画像のvspaceとhspaceの設定、画像の設定display: block ...）。 HTMLは次のようになります。

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-top: 0px; margin-bottom: 0px;"> 
    <tbody> 
     <tr> 
      <td width="311" valign="top" class="nopadding imagecell" style="padding: 0px 0px 0px 0px; font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;"> 
       <div class="imagewrap" style="overflow: hidden; margin-top: 0px; margin-bottom: 0px;"> 
        <img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;"> 
       </div> 
      </td> 
      <td width="10" style="font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;"> 
        &nbsp; 
      </td> 
      <td valign="top" class="background padding" style="padding: 10px 10px 10px 10px; background-color: #ececed; font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;"> 
       <h1 style="font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 19px; font-weight: normal; color: #51ae32; margin: 0px; margin-top: 0px; margin-bottom: 0px; padding: 0px; padding-top: 0px; padding-bottom: 0px;">PhD-Program erstmals ausgezeichnet</h1> 
       <p style="margin-bottom: 0px;">Andipsun daereicit fugit aut quunt volupta tibus. Abore doluptu reptatiumet ad mag- nam fugit dolupturepe nissunt. El illitateni nonecatem rae odi ut dest que asperro vi- tatia ectorem dit laut optas et nonecatem rae. El illitateni nonecatem rae odi ut dest que asperro vitatia ectorem dit laut optas et nonecatem rae. <a href="/" style="color: #51ae32;">Weiterlesen</a></p> 
      </td> 
     </tr> 
    </tbody> 
</table>

レンダリングは、他のクライアントやブラウザのようにする必要があります：

出典

2016-09-24 RoyalKnight

あなたは<table> sおよび<td>のための電子メールの<head>で任意のCSSのリセットを含むことがありますか？ここ<table> s内のパディングとボーダーをリセットするに焦点を当て、私が使用してリセットからいくつかのコードです（インライン化する必要はありません）：

ここ

<head> 
    <style> 
     /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ 
     table { 
      border-spacing: 0 !important; 
      border-collapse: collapse !important; 
      table-layout: fixed !important; 
      margin: 0 auto !important; 
     } 
     table table table { 
      table-layout: auto; 
     } 

     /* What it does: Stops Outlook from adding extra spacing to tables. */ 
     table, 
     td { 
      mso-table-lspace: 0pt !important; 
      mso-table-rspace: 0pt !important; 
     } 
    </style> 
</head>

がfull CSS reset I use for emailsです。

EDIT

に関する画像は、画像の下に余分なスペースを否定するために各画像にdisplay: block;インラインを追加します。

<img style="margin: 0; display: block;" align="left" src="/path/to/image.jpg" width="311" height="234" alt="">

出典

2016-09-26 20:53:04

は、私はすでにこれを試みたが、これはどちらかの問題が解決しない、ありがとう。私はlspaceとrspaceが垂直なスペースを表していると思いますが、イメージとテキストが隣り合わせに配置されている場合にのみ、水平スペーシングの問題に関連して扱わなければなりません。 – RoyalKnight

私はこの同じ問題を抱え、解決策を発見しました。

テキストの親の<td>からパディングを削除し、<td>の中に別のテーブルをネストし、子に戻して追加します。<td>。だから、

、あなたの例を簡素化する：

<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td style="padding: 0"> 
       <div> 
        <img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;"> 
       </div> 
      </td> 
      <td width="10"> 
       &nbsp; 
      </td> 
      <td style="padding: 10px 10px 10px 10px; background-color: #ececed;"> 
       <h1>PhD-Program erstmals ausgezeichnet</h1> 
      </td> 
     </tr> 
    </tbody> 
</table>

はなる：

<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td style="padding: 0"> 
       <div> 
        <img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;"> 
       </div> 
      </td> 
      <td width="10"> 
       &nbsp; 
      </td> 
      <td style="background-color: #ececed;"> 
       <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td style="padding: 10px 10px 10px 10px;"> 
           <h1>PhD-Program erstmals ausgezeichnet</h1> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

出典

2017-08-03 21:53:21

は、上部と下部の画像に余分な隙間があります見通し

答えて

関連する問題