HTMLのヘッダーの高さを変更できません

Question

私の会社の電子メールテンプレートのヘッダーを作成しました。幸いなことに、Webで基本テンプレートを見つけて要件に合わせて調整できました。 HTMLに関しては私は本当の初心者ですので、そこにも多くのエラーがあると確信しています。 ブルーバナーを高さ42pxに減らす方法を理解する必要がありますが、私が試したすべてがそれを破壊します。私はまた、私の600ワイドオプションは非常に古い学校で、それは1200でなければならないと言われました。私はこれも変更しようとしましたが、それは他のフォーマットのすべてを失い、恐ろしく見えます。 誰かが編集提案をすることができたら、私はとても感謝しています。

header.txt header.html

Answer 1

ロゴ/画像を含むTDにパディングを変更してみてください。青いバナーの高さを下げるには、上の表のデータの上と下のパディングを減らします。

これは、ロゴの高さを減らすこと以外にも役立ちます。

Answer 2

コードを見ると、42pxに指定するために変更できるテーブルコンテナに割り当てられている特定の「高さ」はありません。あなたができることのほとんどは、ヘッダーの高さを小さくするために、内側のコンテナから「上」と「下」のパディングを削除することです。

ここにサンプルコードがあります。気がついたら、上と下のパディングを0pxに変更しました。 2番目のtdでは、ロゴと画面の上端の間にスペースを追加するために、トップパディング用に5pxを残しました。幅を編集する場合は、幅を800pxに変更しますが、表内の2つのコンテナの幅も調整する必要があります。たとえば、それらをそれぞれ270pxから370pxに変更しました。

最後に、私が見つけたこの "テンプレート"は非常に複雑で、基本的なHTMLとCSSの少し習得する方がいいと思っています。あなたがしようとしていることは単純であり、より単純なコード。がんばろう！

<center> 
     <table cellspacing="0" cellpadding="0" width="800" class="w320"> 
      <tr> 
      <td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;"> 
       <a href="https://www.hayley-group.co.uk/" style="text-decoration:none;"> 
       <img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/> 
       </a> 
      </td> 
      <td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px"> 
       <table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right"> 
       <tr> 
        <td align="right"> 
        <a href="https://www.facebook.com/HayleyGroup/"> 
        <img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/> 
        </a> 
        </td> 
        <td align="right" style="padding-left:5px"> 
        <a href="https://twitter.com/HayleyGroup"> 
        <img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/> 
        </a> 
        </td> 
        <td align="right" style="padding-left:5px"> 
        <a href="https://www.linkedin.com/company/hayley-group"> 
        <img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/> 
        </a> 
        </td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
</center>