Электронная почта html проблемы с заполнением шаблона мобильного устройства

Question

• 1000

Моя электронная почта 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>

Answer 1

Не знаю, написали ли вы коды, но там слишком много, слишком много встроенных css. Никогда не является точным методом. Проблема в том, что у фотографии нет собственной высоты. Предоставляет высоту с высотой строки. Я установил высоту строки, которая обычно составляет 484 пикселей, на 300 пикселей. Был вы хотите.

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