<ul>导致相邻的div下降

Question

取消排序无序列表标记时，第二个容器div会略微下降。如果你真的可以解释我为什么会这样，并告诉我如何消除这种行为，我会很感激。

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  margin-right: 50px;
  margin-left: 50px;
  margin-top: 100px;
  display: inline-block;
  width: 300px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  text-align: center;
  color: rgb(38, 48, 90);
}

ul {
  list-style-position: inside;
  display: block;
}

＆＃13;

<div class="container">
  <h1> Depr </h1>
  <!--<ul>
        <li>Derping</li>
        <li>Derping</li>
      </ul>-->
</div>

<div class="container">
  <h1> Derpina</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

发生这种情况的主要原因是，当您将任何元素设为inline-block时，它默认与基线对齐。因此，当所有元素的高度不相同时，它会被扰乱并与其基线对齐。这是所有inline-block的主要问题，我们应该通过给出正确的垂直对齐来纠正它。为此，请按照以下代码段进行操作：

我发现您的问题是垂直对齐。请给：

.container {
  vertical-align: middle;   /* This */
  position: relative;
  margin-right: 50px;
  margin-left: 50px;
  margin-top: 100px;
  display: inline-block;
  width: 300px;
  height: 300px;
  background-color: rgb(255,255,255);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 
    0.24);
  text-align: center;
  color: rgb(38, 48, 90);
}

预览

没有<ul>及其：

JSBin：http://jsbin.com/zalagixovu/edit?output