Question

我将页面分成“小节”，但无法摆脱每个小节上方和下方的空白。任何提示都很棒！

Imgur

亮黄色只是表明它发生在下面的下一部分。

我尝试去除所有部分以及主体上的填充和边距，但是仍然保留了很小的白色间隔。我还尝试将这些部分更改为div，并将img放入href或另一个div中。不知道为什么我要得到这个！

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fun Project | Kay Larson</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <div class="header__left-side">
      <img class="logo-placeholder" src="logo-placeholder.jpeg">
      <span class="header__titles">
        <h1>KAYLA LARSON</h1>
        <h2>web designer</h2>
      </span>
    </div>
    <div class="header__right-side">
    </div>
    <div class="header__social-icons">
      <a href="https://www.facebook.com/kayla.larson.710">
        <img src="icons/facebook-logo-button.svg" class="img__fb">
      </a>
      <a href="https://www.linkedin.com/in/kaylalarson4/">
        <img src="icons/linkedin-button.svg" class="img__linkedin">
      </a>
      <a href="https://twitter.com/Kay60372608">
        <img src="icons/twitter.svg" class="img__twitter">
      </a>
    </div>
  </header>
  <a href="#">
    <img src="images/Kayla Larson - F.jpg" class="img__self">
  </a>
  <section class="section__top-get-started">
    <h2 class="h__get-started">Creating Things. <br> Happy Mind.</h2>
    <h3 class="h3__get-started">The ways creating can improve your life.</h3>
    <button class="btn__get-started">Let's Start</button>
  </section>
  <section class="section__about-me">
    <h2>Who I Am</h2>
    <h3>I'm Kay, a Web Developer.</h3>
    <p class="section__body-para">I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.

    This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.</p>
    <button class="btn__contact-me">Contact Me</button>
  </section>
  <section class="section__more-info">
    <h2>For More Information</h2>
    <form class="form__subscribe">
      <h4>Subscribe</h4>
      <input type="test" name="Subscribe" placeholder="Enter your email here">
      <button class="btn__submit">Submit</button>
    </form>
  </section>
<script src="main.js"></script>
</body>
</html>

CSS：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
}

.header__left-side {
  display: flex;
}

.logo-placeholder {
  height: 75px;
  margin: 30px 10px 10px;
  width: 100px;
}

.header__titles {
  margin: 30px 0px 10px;
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: 1em;
  font-weight: 300;
  margin-bottom: 0;
}

h2 {
  font-family: "Lato", sans-serif;
  font-size: 1em;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-top: 2px;
}

.img__fb,
.img__linkedin,
.img__twitter {
  height: 20px;
  margin: 0 10px 10px;
}

.img__self {
    width: 100%;
 }

 .section__top-get-started {
  background-color: #fdf9ba;
  display: flex;
  flex-direction: column;
 }

 .h__get-started {
  position: relative;
  margin: 45px 0px 5px;
  left: 20px;
  width: 280px;
  line-height: 1.3em;
  font-size: 2em;
  text-align: center !important;
 }

 .h3__get-started {
  width: 280px;
  font-family: "Garamond", sans-serif;
  font-weight: 100;
  position: relative;
  margin: 0px 0px 18px;
  left: 20px;
  grid-area: 2 / 1 / 3 / 2;
  line-height: 1.6em;
  font-size: 1em;
  text-align: center;
 }

 .btn__get-started {
  height: 45px;
  min-height: 19px;
  width: 104px;
  position: relative;
  margin: 0px 0px 36px 0;
  left: 108px;
  color: #fff;
  background-color: grey;
 }

Answer 1

我想知道这些边界是否来自图像本身

<img src="images/Kayla Larson - F.jpg" class="img__self">

如果您可以提供图片，将更易于查看。

Answer 2

img {
  display: block;
}

通常是因为Descenders而出现，但我不明白为什么会在您身上发生。试试上面的css属性，它解决了许多项目中的问题

Answer 3

我认为有两件事需要更新。首先，图像显示需要被遮挡，其他部分的显示也需要被弯曲。请尝试以下方法：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
}

.header__left-side {
  display: flex;
}

.logo-placeholder {
  height: 75px;
  margin: 30px 10px 10px;
  width: 100px;
}

.header__titles {
  margin: 30px 0px 10px;
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: 1em;
  font-weight: 300;
  margin-bottom: 0;
}

h2 {
  font-family: "Lato", sans-serif;
  font-size: 1em;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-top: 2px;
}

.img__fb,
.img__linkedin,
.img__twitter {
  height: 20px;
  margin: 0 10px 10px;
}

.img__self {
display:block;
    width: 100%;
 }

 .section__top-get-started {
  background-color: #fdf9ba;
  display: flex;
  flex-direction: column;
 }
 .section__about-me,.section__more-info{
  display: flex;
  flex-direction: column;
 }

 .h__get-started {
  position: relative;
  margin: 45px 0px 5px;
  left: 20px;
  width: 280px;
  line-height: 1.3em;
  font-size: 2em;
  text-align: center !important;
 }

 .h3__get-started {
  width: 280px;
  font-family: "Garamond", sans-serif;
  font-weight: 100;
  position: relative;
  margin: 0px 0px 18px;
  left: 20px;
  grid-area: 2 / 1 / 3 / 2;
  line-height: 1.6em;
  font-size: 1em;
  text-align: center;
 }

 .btn__get-started {
  height: 45px;
  min-height: 19px;
  width: 104px;
  position: relative;
  margin: 0px 0px 36px 0;
  left: 108px;
  color: #fff;
  background-color: grey;
 }

Answer 4

问题出在“ h2 {margin-top：2px;}”中，将其删除并为“ .section__about-me”设置padding-top。标题将移动整个块，因此，请使用内部填充来移动标题。这样可以在一个地方解决问题，但是您了解逻辑。

如何在背景颜色CSS / HTML的各节中修复空白

4 个答案: