时间戳

首页 > 解决方案 > 电子邮件 html 模板移动填充问题

html - 电子邮件 html 模板移动填充问题

问题描述

我是 HTML 和 CSS 的新手，如果这个问题有细微差别，请提前真诚道歉 - 我已经尝试广泛搜索谷歌以找到解决方案，但没有运气！

我的电子邮件 html 模板在这里。我的问题是：

电子邮件中背景图像的顶部和底部填充在移动设备上太大（桌面没问题）。我不知道如何减少它。html 中的所有填充似乎都是 0 或 10，因此完全不确定原因是什么。

                            <div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 20px; padding: 10px;">
                            <div id="ihp1e" class="layout__inner" style="box-sizing: border-box; line-height: inherit; background-color: #FFFFFF; background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;">
                                <!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" style="background: 0px 0px/auto auto repeat url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg) #4b5462;background-position: 0px 0px;background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg);background-repeat: repeat;background-size: auto auto;background-color: #4b5462;"><td style="width: 600px" class="w560"><![endif]-->
                                <div id="i6bgh" class="column" style="box-sizing: border-box; transition-duration: 0.25s, 0.25s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: initial, initial; transition-property: width, max-width; text-align: left; color: #414141; font-size: 14px; line-height: 21px; font-family: Cabin,Avenir,sans-serif; max-width: 400px; width: 100%;">
                                    <div id="in9ah" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
                                        <div id="i2rdl" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
                                            <div id="ijhss" style="box-sizing: border-box; mso-line-height-rule: exactly; line-height: 484px; font-size: 1px;">&nbsp; </div>
                                        </div>
                                    </div>
                                </div>
                                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
                            </div>
                        </div>

标签： htmlcss

解决方案

我不知道您是否编写了代码，但是内联 css 太多太多了。从不不是一个准确的方法。问题是：照片没有自己的高度。提供带行高的高度。我将行高的高度（通常为 484px）设置为 300px。一直是你想要的。

<div id="ijhss" style="box-sizing: border-box; mso-line-height-rule: exactly; line-height: 300px; font-size: 1px;">&nbsp; </div>




 style="box-sizing: border-box; line-height: inherit; background-color: #FFFFFF; background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center; height: 300px;">


<div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 20px; padding: 10px;">
  <div id="ihp1e" class="layout__inner" style="box-sizing: border-box; line-height: inherit; background-color: #FFFFFF; background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;">
    <!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" style="background: 0px 0px/auto auto repeat url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg) #4b5462;background-position: 0px 0px;background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg);background-repeat: repeat;background-size: auto auto;background-color: #4b5462;"><td style="width: 600px" class="w560"><![endif]-->
    <div id="i6bgh" class="column" style="box-sizing: border-box; transition-duration: 0.25s, 0.25s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: initial, initial; transition-property: width, max-width; text-align: left; color: #414141; font-size: 14px;  font-family: Cabin,Avenir,sans-serif; max-width: 400px; width: 100%;">
      <div id="in9ah" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
        <div id="i2rdl" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
          <div id="ijhss" style="box-sizing: border-box; mso-line-height-rule: exactly; line-height: 300px; font-size: 1px;">
            &nbsp; </div>
        </div>
      </div>
    </div>
    <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
  </div>
</div>

推荐阅读