Question

我是HTML和CSS的新手，如果这个问题很细微，我谨在此先向您道歉-我已经尝试在Google上进行广泛的搜索，但没有运气！

我的电子邮件html模板是here。我的问题是：

电子邮件中背景图片周围的顶部和底部填充 在移动设备上 太大（可以在桌面使用）。我不知道如何减少它。 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>

Answer 1

我不知道您是否编写了代码，但是内联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>

Answer 2

您需要更改iwvdj上的边距，因为它们会影响图像。图片本身不会被填充。

代替

<div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 20px; padding: 0px;">

尝试

<div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 0 0 20px 20px; padding: 0px;">

这会将您的上下边距设置为0。

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

2 个答案: