时间戳

首页 > 解决方案 > 将 margin-top 添加到 h1 会在 background-color 之间添加空白

html - 将 margin-top 添加到 h1 会在 background-color 之间添加空白

问题描述

我正在尝试将 about 50pxof添加margin-top到 myh1中，但是当我对其进行编码时，它会在 mybackground-color和 web.

我应该改用填充吗？在我由 Angela Yu 参加的课程中，她正在使用margin-top.

我不确定您是否可以在我的示例中看到空白，但是如果您将代码复制并粘贴到 CodePen 中，您应该可以看到。

body {
  margin: 0;
  text-align: center;
  font-family: 'Merriweather', serif;
}

h1 {
  font-family: 'Sacramento', cursive;
  font-size: 5.625rem;
  margin-top: 50px;
  color: #66BFBF;
}

h2 {
  color: #66BFBF;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: normal;

}

h3 {
  font-family: 'Montserrat', sans-serif;
  color: #11999E;
}
a {
  color: #11999E;
}
.top-container {
  background-color: #E4F9F5;

}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My site</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" type="ico" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>

<body>
  <div class="top-container">
    <img class="top-cloud" src="images/cloud.png" alt="Cloude ing">
    <h1>I'm Rudakov</h1>
    <h2>a programmer</h2>
    <img class="bottom-cloud" src="images/cloud.png" alt="Cloud image">
    <img src="images/mountain.png" alt="Mountain image">
  </div>
  <div class="middle-container">
    <div class="profile">
      <img src="images/Profile.png" alt="my picture">
      <h2>Hello.</h2>
      <p>I am a web developer. I love tea and outdoor activities.</p>
    </div>
    <hr>
    <div class="skills">
      <h2>My Skills.</h2>
      <div class="skill-row">
        <img class="Skill-picture1" src="images/Skill picture 3.png" alt="skill picture1">
        <h3>Desing and Development</h3>
        <p> Great knowledge in this area, helps me to come to the solution of problems much faster</p>
      </div>
      <div class="skill-row">
        <img class="Skill-picture2" src="images/bull.png" alt="skill picture2">
        <h3>Sociability</h3>
        <p>I can find a common language with any person.</p>
      </div>
    </div>
    <hr>
    <div class="contact-me">
      <h2>Get In Touch</h2>
      <h3>Lorem ipsum dolor sit amet, non elit.</h3>
      <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
      <a class="btn" href="mailto:jen90_0@yahoo.com">CONTACT ME</a>
    </div>
  </div>

标签： htmlcss

解决方案

如 CSS 的Box Model所述，您应该使用填充而不是边距。

.top-container h1 {
  margin-top: 0;
  padding-top: 50px;
}

推荐阅读