小さな画面でパディングが有効になっています

Question

私は電子メールのニュースレターを作成しているため、テーブルを使用しています。私はデスクトップ画面でパディングをしたいと思うところがある。人が携帯電話に乗っているときは、画像に余白があってはいけません。次のコードはデックストップで動作しますが、ウィンドウのサイズを変更すると、ピクチャに余白が残っています（0pxに設定しても）。

誰もがなぜそれが起こっているのを見ることができますか？

.img-position { 
 
    padding: 40px 0px 40px 0px; 
 
} 
 
@media only screen and (max-width: 596px) { 
 
    .img-position { 
 
    padding: 0px 0px 0px 0px; 
 
    } 
 
}

<!-- Top Picture Start --> 
 
<table class="row background-color__blue"> 
 
    <tr> 
 
    <td class="center img-position" align="center"> 
 
     <center> 
 
     <table class="container"> 
 
      <tr> 
 
      <td class="wrapper last"> 
 
       <table class="twelve columns"> 
 
       <tr> 
 
        <td> 
 
        <img width="580" height="300" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"> 
 
        </td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </center> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<!-- Top Picture End -->

Answer 1

答えは次のとおりです。

@media only screen and (max-width: 596px) { 

     td.img-position { 
     padding:0px 0px 0px 0px; 
     } 

    } 

Answer 2

によるデスクトップ幅変化にパディング変化と@mediaルールは私のために正常に動作します。テーブルのパディングを削除する場合は、下の例のような特別なCSSルールを追加してください（imgはdisplay：blockに設定して、空の空白を削除する必要があります）。エフェクトをより見やすくするために、黄色の背景を追加しました。おそらく

.img-position { 
 
    padding:40px 0px 40px 0px; 
 
} 
 

 
@media only screen and (max-width: 596px) { 
 
    .img-position { 
 
    padding:0px 0px 0px 0px; 
 
    } 
 
} 
 

 
img{ 
 
display:block; 
 
} 
 

 
table{ 
 
    border-collapse:collapse; 
 
} 
 

 
table *{ 
 
    padding:0px; 
 
    margin:0px; 
 
}

<!-- Top Picture Start --> 
 
      <table class="row background-color__blue" style='background-color:yellow'> 
 
      <tr> 
 
       <td class="center img-position" align="center"> 
 
       <center> 
 
        <table class="container"> 
 
        <tr> 
 
         <td class="wrapper last"> 
 
         <table class="twelve columns"> 
 
          <tr> 
 
          <td> 
 
           <img width="580" height="300" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"> 
 
          </td> 
 
          </tr> 
 
         </table> 
 
         </td> 
 
        </tr> 
 
        </table> 
 
       </center> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <!-- Top Picture End -->