Question

我正在尝试删除标题中蓝绿色框周围的间距。我希望底线与蓝绿色框的底部匹配。这是我要实现的目标的图片，然后是我的代码：

。

#wrap {
  margin: 0 auto;
  width: 960px;
  text-align: center;
}

body {
  margin: 0 auto;
  width: 960px;
}

#firstName {
  color: white;
  background-color: #4aaaa5;
  width: 300px;
  height: 85px;
  float: left;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 250%;
  text-align: center;
}

#menu {
  color: #777777;
  background-color: white;
  width: 300px;
  height: 85px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  float: right;
  line-height: 125px;
}

hr {
  margin: 0, 0, 0, 0;
  clear: both;
}

img {
  width: 200px;
  height: 200px;
}

#aboutMe {
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rob Connolly's Portfolio</title>
  <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>

<div id="wrap">
  <header>
    <h1 id="firstName">

      Rob Connolly

    </h1>

    <div id="menu">

      <span>
            About  &nbsp;
            </span>

      <span>
            Portfolio  &nbsp;
            </span>

      <span>
            Contact  &nbsp;
            </span>

    </div>

</div>

</header>
<hr>

<body>

  <div id="aboutMe">

    <h2>
      About Me
    </h2>

    <img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">

    <p>
      Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
      it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
      depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
      in 72 hours. Check out the pictures HERE.
    </p>

    <p>
      Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
      my code help your business scale.
    </p>

    <p>
      If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
    </p>

  </div>
  <p>
    Copyright &copy;
  </p>


</body>

</html>

Answer 1

首先，您应该将<header>移到<body>内部。其次，您可以通过向选择器中添加#firstName来删除margin: 0的边距：

#firstName {
  margin: 0;
}

然后，您可以在#menu上使用Flexbox将菜单垂直居中：

#menu {
  /* Adds Flexbox to element */
  display: flex; 

  /* Aligns the menu's children horizontally, putting equal 
     spacing between each child  */
  justify-content: space-between;

  /* Aligns the menu's children vertically */
  align-items: center;
}

#wrap {
  margin: 0 auto;
  width: 960px;
  text-align: center;
}

body {
  margin: 0 auto;
  width: 960px;
}

#firstName {
  /* Remove margin from the div */
  margin: 0;
  color: white;
  background-color: #4aaaa5;
  width: 300px;
  height: 85px;
  float: left;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 250%;
  text-align: center;
}

#menu {
  color: #777777;
  background-color: white;
  width: 300px;
  height: 85px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  float: right;
  line-height: 125px;
  
  /* Add Flexbox to your menu*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

hr {
  margin: 0, 0, 0, 0;
  clear: both;
}

img {
  width: 200px;
  height: 200px;
}

#aboutMe {
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rob Connolly's Portfolio</title>
  <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>

<body>

  <div id="wrap">
    <header>
      <h1 id="firstName">Rob Connolly</h1>
      <div id="menu">
        <span>About  &nbsp;</span>
        <span>Portfolio  &nbsp;</span>
        <span>
            Contact  &nbsp;
        </span>
      </div>
    </header>
  </div>
  <hr>
  <div id="aboutMe">

    <h2>
      About Me
    </h2>

    <img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">

    <p>
      Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
      it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
      depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
      in 72 hours. Check out the pictures HERE.
    </p>

    <p>
      Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
      my code help your business scale.
    </p>

    <p>
      If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
    </p>

  </div>
  <p>
    Copyright &copy;
  </p>


</body>

</html>

为什么页眉周围的间距不消失？

1 个答案: