Question

我是新来的，我想知道：如何将页眉与页面顶部对齐？现在，页眉和页面顶部之间有太多空白。有没有办法以某种方式将其“调整”到顶部？任何帮助表示赞赏。谢谢。附件是我的html代码和CSS。

enter image description here

@charset "UTF-8";

/* CSS Document */

body {
  margin: 0;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-family: Helvetica, sans-serif;
  color: #666;
}

h1 {
  color: #333;
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}

h2 {
  color: #fff;
  font-family: Minion Pro, Times New Roman, serif;
  font-size: 42px;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  padding-top: 25px;
  margin-bottom: 15px;
}

h3 {
  color: #333;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}

h5 {
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  margin-top: 0;
}

p,
ul {
  font-size: 16px;
  line-height: 23px;
  font-weight: normal;
  text-align: left;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
}

.container2 {
  padding-top: 10px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 10px;
  background-color: #dce4ea;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
}

.container3 {
  background-color: #375e97;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
  top: 0;
}

.container4 {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 25px;
  padding-bottom: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.subhead {
  color: #fff;
  font-family: Minion Pro, Times New Roman, serif;
  font-size: 28px;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  padding-bottom: 25px;
  margin-top: 0px;
}

.title {
  color: #fff;
  padding: 5px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.cell {
  font-size: 17px;
  font-weight: normal;
  text-align: center;
  margin-bottom: 9px;
  margin-top: 9px;
}

.refund {
  font-size: 14px;
  line-height: 22px;
  font-weight: normal;
  text-align: left;
}

.button {
  transition: all 100ms ease-in;
  /**doubtful in emails**/
  background: #375e97;
  border-radius: 8px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: block;
  color: #ffffff;
  text-align: center;
}

.button:hover {
  transition: all 100ms ease-in;
  /**doubtful in emails**/
  background: #555;
  border-radius: 8px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: block;
  color: #ffffff;
  text-align: center;
}

<html lang="en">

<head>
  <title>Multifamily Texas – Early Bird Registration</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">

</head>

<body>

  <div class="container3">
    <h2>ACT NOW and SAVE $80!</h2>
    <p class="subhead">Early Bird Registration is $279 through August 17th</p>
  </div>

  <div class="container4">
    <table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
      <tr>
        <td bgcolor="#375e97" align="center" colspan="2">
          <p class="title">Early Bird Registration Pricing</p>
        </td>
      </tr>
      <tr>
        <td width="50%">
          <p class="cell">Single Attendee</p>
        </td>
        <td width="50%">
          <p class="cell">$279</p>
        </td>
      </tr>
      <tr>
        <td width="50%" bgcolor="#d3daee">
          <p class="cell">Two Attendees</p>
        </td>
        <td width="50%" bgcolor="#d3daee">
          <p class="cell">$568</p>
        </td>
      </tr>
      <tr>
        <td width="50%">
          <p class="cell">Three Attendees</p>
        </td>
        <td width="50%">
          <p class="cell">$857</p>
        </td>
      </tr>
      <tr>
        <td width="50%" bgcolor="#d3daee">
          <p class="cell">Four Attendees</p>
        </td>
        <td width="50%" bgcolor="#d3daee">
          <p class="cell">$1146</p>
        </td>
      </tr>
      <tr>
        <td width="50%">
          <p class="cell">Five Attendees</p>
        </td>
        <td width="50%">
          <p class="cell">$1435</p>
        </td>
      </tr>
      <tr>
        <td width="50%" bgcolor="#d3daee">
          <p class="cell">Six Attendees</p>
        </td>
        <td width="50%" bgcolor="#d3daee">
          <p class="cell">$1724</p>
        </td>
      </tr>
    </table>
  </div>

  <div class="container">
    <h3>Refund Policy</h3>
    <p class="refund"><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This
      credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
    <p class="refund" align="center">InterFace Conference Group/France Media, Inc. <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/7e42d5bc6e55405e8c8bd7f280de4d3c.doc" target="_blank">Attendance &amp; Substitution Policy</a> and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx"
        target="_blank">Privacy Policy</a></p>
  </div>

</body>

</html>

Answer 1

这是因为<h2>的{{1}}未删除。更新此规则：

margin-top

预览

如何将页眉与页面顶部对齐？

1 个答案: