Question

我正尝试在下图中的“ Affordable Professional Web Design”上方创建一个空间，以便它创建一个被图像占用的空间

但是，当我这样做时，它似乎只会将图像向下推并留下空白（以红色表示）。我试图通过应用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>

Answer 1

尝试使用padding代替保证金：

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

在页面上创建空白的边距

1 个答案: