在 HTML 文本中插入空格

Question

我已经为电子邮件编写了 HTML 代码，但是我希望在第一个 Welcome 顶部和 Welcome in 页脚底部留出一点空间/填充。我不想添加标签，因为它提供了比所需更多的空间。任何建议，将不胜感激。谢谢。

代码如下：

<div class="container">
  <div class="container" style="background-color:#00843d; width= '60px'; ">
    <p align="left"><b> <font face="Franklin Gothic Book" size="6" color="white" style="margin-left: 30px">Welcome</font> </b> </p>
    <div class="container" style="background-color:#f4f4f4;">
      <p align="justify" style="margin-left: 30px; margin-right: 30px;">
        <br> Lorem ipsum,
        <br>
        <br> Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere.
        Ne partiendo constituto voluptatibus
        <br>
        <br>
        <br> Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere.
        Ne partiendo constituto voluptatibus
        <br>
        <br> Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere.
        Ne partiendo constituto voluptatibus
        <br>
        <br> Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere.
        Ne partiendo constituto voluptatibus
        <br>
        <br> Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere.
        Ne partiendo constituto voluptatibus

      </p>
      <div class="container" style="background-color:#005a29;">
        <center>
          <footer>
            <p>
              <font face="Franklin Gothic Book" color="white">
                <br> Welcome
              </font>
            </p>
            <font face="Franklin Gothic Book" color="white">
            </font>
            <p></p>
          </footer>
        </center>
      </div>
    </div>
  </div>
</div>

Answer 1

p.header {
    padding-top: 15px;
}
footer.footer {
    padding-bottom: 5px;
}

<div class="container">
    <div class="container" style="background-color:#00843d; width= '60px'; ">
        <p align="left" class="header"><b>
                <font face="Franklin Gothic Book" size="6" color="white" style="margin-left: 30px">Welcome</font>
            </b> </p>
        <div class="container" style="background-color:#f4f4f4;">
            <p align="justify" style="margin-left: 30px; margin-right: 30px;">
                </br>
                Lorem ipsum,
                </br>
                </br>
                Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo constituto voluptatibus
                </br>
                </br>
                </br>
                Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo constituto voluptatibus
                </br>
                </br>
                Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo constituto voluptatibus
                </br>
                </br>
                Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo constituto voluptatibus
                </br>
                </br>
                Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo constituto voluptatibus

            </p>
            <div class="container" style="background-color:#005a29;">
                <center>
                    <footer class="footer">
                        <p>
                            <font face="Franklin Gothic Book" color="white"></br>
                                Welcome</a>
                        </p>
                        </font>
                        </p>
                    </footer>
                </center>
            </div>
        </div>
    </div>
</div>

希望这会有所帮助

Answer 2

为什么不像平常那​​样只添加一个padding 来添加空格？

只需将padding-top 添加到顶部欢迎消息的容器中，将padding-bottom 添加到底部欢迎消息的容器中。

<html>
<div class="container">
  <div class="container" style="background-color:#00843d; width= '60px'; padding-top:10px;">
    <p align="left"><b> <font face = "Franklin Gothic Book" size = "6" color = "white" style = "margin-left: 30px">Welcome</font> </b> </p>
    <div class="container" style="background-color:#f4f4f4;">
      <p align="justify" style="margin-left: 30px; margin-right: 30px;">
        </br>
        Lorem ipsum,
        </br>
        </br>
        Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo
        constituto voluptatibus
        </br>
        </br>
        </br>
        Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo
        constituto voluptatibus
        </br>
        </br>
        Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo
        constituto voluptatibus
        </br>
        </br>
        Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo
        constituto voluptatibus
        </br>
        </br>
        Lorem ipsum dolor sit amet, eu malis verterem scribentur usu. Falli error harum vim id, his eu paulo labore. Has tibique facilisis ei, per duis delenit laboramus in, utroque tractatos duo in. Suas fuisset ei per. Eos at dolor vivendum oportere. Ne partiendo
        constituto voluptatibus

      </p>
      <div class="container" style="background-color:#005a29; padding-bottom:10px;">
        <center>
          <footer>
            <p>
              <font face="Franklin Gothic Book" color="white">
                </br>
                Welcome</a>
            </p>
            </font>
            </p>
          </footer>
        </center>
      </div>
    </div>
  </div>
</div>

Answer 3

也许尝试在顶部添加类似的内容

元素

<p align = "left" style="padding:10px 0;">

或

<p align = "left" style="padding-top:10px;">