Question

我正在使用桌子，因为我正在制作电子邮件简报。我有一张照片，我想在桌面屏幕上填充一些内容。当一个人在移动设备上时，图片上不应有任何填充物。以下代码适用于dekstop，但是当我调整窗口大小时，我仍然在图片上有一个填充，即使我将其设置为0px。

有人能看出为什么会这样吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

填充在小屏幕上仍然有效

2 个答案: