Html 造型<；人力资源>；mailer css中的标记和文本

我想设置一个邮件样式如下（这是一个移动视图，这是最重要的）

我不知道如何实现这样的观点。我在尝试下面的东西：

<h1>Hi there,</h1>
<p>Thank you for signing up!</p>
<hr>
<p>You're almost there. Before starting with your journey, we want to make sure that your email address is correct. Please click here to complete your subscription.</p>
<hr>
<h2>Your account</h2>
...

使用上面的css看起来很糟糕（iPhone视图）：

---

您可以尝试使用vh单位而不是百分比

<h1>Hi there,</h1>
<p>Thank you for signing up!</p>
<hr class="hr1">
<p>You're almost there. Before starting with your journey, we want to make sure that your email address is correct. Please click here to complete your subscription.</p>
<hr class="hr2">
<h2>Your account</h2>

  h1 {
    color: #0C0C0D;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 33px;
    margin-bottom: 33px;
  }
  hr {
    width: 50vh;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);

  }
 .hr1{
      margin: 30px 0;
  }

 .hr2{
      margin: 20px  0 0 0;
  }

  p {
    color: #0C0C0D;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 20px;
  }

你好，
谢谢你的注册


你快到了。在开始您的旅程之前，我们希望确保您的电子邮件地址正确无误。请单击此处完成订阅


你的帐户
h1{
颜色：#0c0d；
字号：26px；
字体大小：粗体；
字母间距：0；
线高：33px；
边缘底部：33像素；
}
人力资源{
宽度：50vh；
边界：0；
高度：1px；
背景：#333；
背景图像：线性渐变（向右，#ccc，#333，#ccc）；
}
.hr1{
利润率：30px0；
}
.hr2{
利润率：20px0；
}
p{
颜色：#0c0d；
字体大小：16px；
字号：600；
字母间距：0；
线高：20px；
}

好的，但是如何在

之间留出空间谢谢您的注册和第一个屏幕中的行一样？
<h1>Hi there,</h1>
<p>Thank you for signing up!</p>
<hr class="hr1">
<p>You're almost there. Before starting with your journey, we want to make sure that your email address is correct. Please click here to complete your subscription.</p>
<hr class="hr2">
<h2>Your account</h2>

  h1 {
    color: #0C0C0D;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 33px;
    margin-bottom: 33px;
  }
  hr {
    width: 50vh;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);

  }
 .hr1{
      margin: 30px 0;
  }

 .hr2{
      margin: 20px  0 0 0;
  }

  p {
    color: #0C0C0D;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 20px;
  }