图片小于 596px 时填充

Question

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

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

框架里面有很多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;
 }

以上是您定义的媒体查询。这里正在工作fiddleworking fiddle

Answer 2

出现在 596px 处的填充（或 space）源自 container class 此处：

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

所以把上面的改成：

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

Answer 3

这是工作示例 https://jsfiddle.net/sdk3dsyt/ 你的 @media-query 在你定义初始填充之前就已经存在，这就是你的 @media-query 规则被覆盖的原因

When more than 1 overlapping styles are applied to the same element, only the last style is visible 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 时填充

Padding on picture when under 596px

html

css

zurb-foundation