Question

我正在制作一个测试网站来练习Practice Page。我在电子邮件的基础框架中设置了徽标和图片。该网站现在响应。带有浣熊的图片在顶部和底部有一个40px的填充。当我在596px下降时，即使我试图将填充设置为0px，仍然存在填充。

当我达到596像素时，我需要填充到0px，但为什么现在不起作用？我可以在!important上设置media only screen。但这是不好的编码行为，对吗？

框架中有很多CSS。因此我做了一个fiddle

桌面CSS

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

移动CSS

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

HTML

<body>
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top">
        <center>
          <!-- Logo Start -->
          <table align="center" class="wrapper header float-center background-color__white">
            <tbody>
              <tr>
                <td class="wrapper-inner">
                  <table align="center" class="container" style="background-color:transparent">
                    <tbody>
                      <tr>
                        <td>
                          <table class="row collapse">
                            <tbody>
                              <tr>
                                <th class="img-headline">
                                  <center>
                                    <a href="http://smalldanishhotels.dk/"><img src="http://www.fontmagic.com/files/animal-silence.gif" alt="TestPicture" align="center" class="float-center" width="250" height="80"></a>
                                </center>
                                </th>
                                <th class="expander"></th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- Logo End -->
          <!-- 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="http://animalhumanhealth.com/wp-content/uploads/2016/07/racoon1.png">
                          </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </center>
              </td>
            </tr>
          </table>
          <!-- Top Picture End -->



          <!-- Row 1 End -->


          <!-- Email Button End -->
        </center>
      </td>
    </tr>
  </table>
</body>

Answer 1

添加

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

您已定义的媒体查询。这是工作小提琴working fiddle

Answer 2

596px处出现的填充（或空格）来自container类：

table.body .container {
    width: 95% !important;
}

所以将上面改为：

table.body .container {
   width: 100% !important;
}

Answer 3

此处的工作示例https://jsfiddle.net/sdk3dsyt/您的@media-query在定义初始填充之前已经过去了，这就是为什么您的@media-query规则被覆盖

当同一元素应用了多个重叠样式时，只显示最后一个样式https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm

在596px以下填充图片

3 个答案: