iframe div需要额外的间距

Question

我正在尝试使用display：inline-block添加元素，除具有iframe的div之外，其他所有功能均正常。底部总是有多余的空白，但是我无法提交要覆盖的样式。

这里是jsfiddle。那里怎么了？

我的iframe div：

.map__section {
  width: 40%;
  height: 410px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  display: inline-block;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FFD100;
}

/*
.container-header-back {
  height: 600px;
  background-color: #FFD100;
} */

.container__header {
  margin-top: 100px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 0;
  background-color: white;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.header__h1 {
  font-family: "Proxima Nova Extrabold";
  text-align: center;
  color: black;
  font-size: 50px;
}

.header__quote__text {
  font-family: "Proxima Nova Light";
  font-size: 50px;
  padding-left: 30px;
}

.header__quote__text:after {
  content: close-quote;
}

.header__quote__text:before {
  content: open-quote;
}

.header__quote__footer {
  font-family: "Proxima Nova Regular";
  font-size: 20px;
  text-align: right;
}

.navigation {
  font-family: "Proxima Nova Semibold";
  text-align: center;
  padding-top: 50px;
}

.navigation_link {
  margin-left: 40px;
  margin-right: 40px;
  text-decoration: none;
  color: black;
  padding: 10px;
  width: 300px;
}

.navigation_link:hover {
  font-size: 110%;
  color: #4b4f54;
}

.container__about {
  display: inline-block;
  width: 40%;
  height: 300px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.container__about {
  background-color: white;
}

.container__tell {
  display: inline-block;
  width: 40%;
  height: 300px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.container__tell {
  background-color: white;
}

.main__section__h2 {
  font-family: "Proxima Nova Semibold";
  text-align: center;
}

.main__section__text {
  font-family: "Proxima Nova Regular";
  margin-left: 30px;
  margin-right: 30px;
  font-size: 20px;
}

.form__field {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  height: 50px;
  text-align: center;
  font-family: "Proxima Nova Regular";
  font-size: 20px;
}

.main__section__h2__form {
  font-family: "Proxima Nova Semibold";
  text-align: center;
}

.container__form {
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 5px;
}

.submit__form {
  width: 100%;
  height: 50px;
  background-color: #FFB500;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  color: black;
  font-size: 20px;
  cursor: pointer;
}

img {
  margin-right: 10px;
}

.submit__form:hover {
  background-color: #FAE053;
}

.main {
  padding-top: 30px;
  margin-bottom: 110px;
  text-align: center;
}

.form__section {
  display: inline-block;
  width: 40%;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.map__section {
  width: 40%;
  height: 410px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  display: inline-block;
}

.map__section iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

<main class="main">

  <section class="container__about">
    <h2 class="main__section__h2">What you are doing here</h2>
    <p class="main__section__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
  </section>

  <section class="container__tell">
    <h2 class="main__section__h2">What I can tell you</h2>
    <p class="main__section__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
  </section>


  <section class="form__section">
    <h2 class="main__section__h2__form">How you can find me</h2>
    <div class="container__form">
      <form action="/" method="">

        <input class ="form__field" type="text" id="fname" name="lastname" placeholder="Your last name...">

        <input class ="form__field" type="text" id="lname" name="firstname" placeholder="Your first name...">

        <input class ="form__field" type="email" id="email" name="email" placeholder="Your email address..">

        <input type="submit" value="Submit" class="submit__form">
      </form>
      <div class="div__img">
        <a href="#"><img src="images/icons8-facebook-48.png" alt="Facebook"></a>
        <a href="#"><img src="images/icons8-instagram-48.png" alt="Instagram"></a>
        <a href="#"><img src="images/icons8-sent-filled-50.png" alt="Telegram"></a>
      </div>
    </div>
  </section>

  <section class="map__section">

    <iframe src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"></iframe>

  </section>

</main>

Answer 1

这是因为您在display: inline-block中设置了所有卡。因此：充当文本，但允许设置宽度和高度。 因此，您的垂直对齐方式不是最重要的，而是最基本的。

这是使用flexbox的示例：

body {
  margin: 0;
  padding: 0;
  background-color: #FFD100;
}

/*
.container-header-back {
  height: 600px;
  background-color: #FFD100;
} */

.container__header {
  margin-top: 100px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 0;
  background-color: white;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.header__h1 {
  font-family: "Proxima Nova Extrabold";
  text-align: center;
  color: black;
  font-size: 50px;
}

.header__quote__text {
  font-family: "Proxima Nova Light";
  font-size: 50px;
  padding-left: 30px;
}

.header__quote__text:after {
  content: close-quote;
}

.header__quote__text:before {
  content: open-quote;
}

.header__quote__footer {
  font-family: "Proxima Nova Regular";
  font-size: 20px;
  text-align: right;
}

.navigation {
  font-family: "Proxima Nova Semibold";
  text-align: center;
  padding-top: 50px;
}

.navigation_link {
  margin-left: 40px;
  margin-right: 40px;
  text-decoration: none;
  color: black;
  padding: 10px;
  width: 300px;
}

.navigation_link:hover {
  font-size: 110%;
  color: #4b4f54;
}

.container__about {
  display: block;
  margin: 1em;
  width: 40%;
  height: 300px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.container__about {
  background-color: white;
}

.container__tell {
  display: block;
  margin: 1em;
  width: 40%;
  height: 300px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.container__tell {
  background-color: white;
}

.main__section__h2 {
  font-family: "Proxima Nova Semibold";
  text-align: center;
}

.main__section__text {
  font-family: "Proxima Nova Regular";
  margin-left: 30px;
  margin-right: 30px;
  font-size: 20px;
}

.form__field {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  height: 50px;
  text-align: center;
  font-family: "Proxima Nova Regular";
  font-size: 20px;
}

.main__section__h2__form {
  font-family: "Proxima Nova Semibold";
  text-align: center;
}

.container__form {
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 5px;
}

.submit__form {
  width: 100%;
  height: 50px;
  background-color: #FFB500;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  color: black;
  font-size: 20px;
  cursor: pointer;
}

img {
  margin-right: 10px;
}

.submit__form:hover {
  background-color: #FAE053;
}

.main {
  padding-top: 30px;
  margin-bottom: 110px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.form__section {
  display: block;
  margin: 1em;
  width: 40%;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}

.map__section {
  width: 40%;
  height: 410px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  display: block;
  margin: 1em;
}

.map__section iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

<main class="main">

  <section class="container__about">
    <h2 class="main__section__h2">What you are doing here</h2>
    <p class="main__section__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
  </section>

  <section class="container__tell">
    <h2 class="main__section__h2">What I can tell you</h2>
    <p class="main__section__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
  </section>


  <section class="form__section">
    <h2 class="main__section__h2__form">How you can find me</h2>
    <div class="container__form">
      <form action="/" method="">

        <input class ="form__field" type="text" id="fname" name="lastname" placeholder="Your last name...">

        <input class ="form__field" type="text" id="lname" name="firstname" placeholder="Your first name...">

        <input class ="form__field" type="email" id="email" name="email" placeholder="Your email address..">

        <input type="submit" value="Submit" class="submit__form">
      </form>
      <div class="div__img">
        <a href="#"><img src="images/icons8-facebook-48.png" alt="Facebook"></a>
        <a href="#"><img src="images/icons8-instagram-48.png" alt="Instagram"></a>
        <a href="#"><img src="images/icons8-sent-filled-50.png" alt="Telegram"></a>
      </div>
    </div>
  </section>

  <section class="map__section">

    <iframe src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"></iframe>

  </section>

</main>