在页面上创建空白的边距[重复]答案

【问题标题】：Margin creating white space on page [duplicate]在页面上创建空白的边距[重复]
【发布时间】：2018-06-28 03:09:11
【问题描述】：

我正在尝试在下图中的“经济实惠的专业网页设计”上方创建一个空间，以便它创建一个被图像占用的空间

但是，当我这样做时，它似乎只会将图像向下推并留下空白（以红色表示）。我试图通过应用 margin-top 来做到这一点，尽管找不到解决方案。任何想法如何解决？

/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow;
  hidden;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}


/* Header */

header {
  background-color: #35424a;
  border-bottom: orange solid;
  min-height: 70px;
  padding-top: 30px;
  color: #ffffff;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header li {
  float: left;
  list-style: none;
  padding: 0 10px 0 10px;
}

header nav {
  float: right;
  text-transform: uppercase;
}

header a {
  text-decoration: none;
  color: #ffffff;
}

#highlight,
#current a {
  color: #e8491d;
}

nav a:hover {
  color: orange;
}


/* Showcase */

#showcase {
  min-height: 400px;
  background: url('../countryside.jpg') no-repeat;
  background-size: cover;
  text-align: center;
  color: #ffffff;
}

#showcase h1 {
  margin-top: 100px;
  padding: 30px;
  text-align: center;
  color: #ffffff;
  font-size: 50px;
}

#showcase p {
  text-align: center;
  color: #ffffff;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css" />
  <meta name="viewport" width="device-width" />
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span id="highlight">Test</span> Web Design</h1>
      </div>
      <nav>
        <ul>
          <li id="current"><a href="Home.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </nav>

    </div>

  </header>

  <section id="showcase">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
        mollis.
      </p>
    </div>
  </section>

  <section id="newsletter">
    <div class="container">
      <form>
        <h2>Subscribe to our newsletter</h2>
        <input type="email" placeholder="Enter email..." />
        <button type="submit">Submit</button>
      </form>
    </div>
  </section>

  <section class="boxes">
    <div class="container">
      <div class="box">
        <img src="HTML.png" alt="" />
        <h3>HTML Markup</h3>
        <p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
      </div>

      <div class="box">
        <img src="css.png" height="200px" alt="" />
        <h3>CSS3 Styling</h3>
        <p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
      </div>

      <div class="box">
        <img src="graphic_design.svg" height="300px" alt="" />
        <h3>Graphic Design</h3>
        <p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
      </div>
    </div>


  </section>


</body>

【问题讨论】：

标签： html css margin

【解决方案1】：

尝试使用padding：

#showcase h1{
    padding:100px 30px 30px 30px;
    text-align:center;
    color:#ffffff;
    font-size:50px;
}

【讨论】：