html - <div> 中的可用空间

Question

我找不到错误。这就像填充，但填充为0。如果可以，请帮助我。我杀了大约一个小时。可以查一下http://codepen.io/sergeviper/pen/ONZWEN 它应该是一个大 div 中的两个 div，高度固定，宽度应为 100%。 "PICTURE"

.card {
  padding: 0px;
  background-color: rgba(256, 256, 256, 1);
  width: 100%;
  display: inline-block;
}
.map {
  width: 725px;
  height: 368px;
  display: inline-block;
}
.auth {
  display: inline-block;
  width: 275px;
  height: 368px;
  float: right;
  font-family: 'Ubuntu';
  font-size: 8pt;
}

<div class="card">
  <div class="map">
    <img class="map" src="img/map.png" height="374px">
  </div>
  <div class="auth">
    <form>
      <h1>Вход на сайт</h1>
      <input type="text" placeholder="Логин" />
      <input type="password" placeholder="Пароль" />
      <br>
      <input type="submit" value="ВОйти" />
    </form>
    <h2 style="color:#999999">Войти с помощью:</h2>
    <div class="social">
      <div id="vk"></div>
      <div id="ok"></div>
      <div id="fb"></div>
      <div id="gp"></div>
      <div id="tw"></div>
    </div>
    <div class="reg"><a href="">Регистрация</a>
    </div>
    <div class="subreg"><a href="">Забыли пароль</a>
    </div>
  </div>
</div>

Answer 1

问题是图像是“inline(-block)”。这会导致行高在图像下方创建空间。将图像更改为'display: block'，问题就解决了。