Why is the second div slipping?

Question

I have the following html / css code:

.first,
.second {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  text-align: center;
  display: inline-block
}

.first > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="first"><h1>first div</h1><ul><li>text</li></ul></div>
<div class="second"><h1>second div</h1></div>

Run codeHide result

Why is the second div moving down when I put the ul element inside the first div?

JS Bin link , just in case. Thank!

Answer 1

Since the default value vertical-align(applied to inline-level and table-cell elements) is baseline, you need to use vertical-align: top.

.first,
.second {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}
.first > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="first">
  <h1>first div</h1>
  <ul>
    <li>text</li>
  </ul>
</div>
<div class="second">
  <h1>second div</h1>
</div>

Run codeHide result