CODEWITHSUNDEEP
htmlcss
Evgeny Samsonov
Evgeny Samsonov

Reputation: 2750

Why second div is slides down?

I've got next 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>

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

JS Bin link, just in case. Thanks!

Upvotes: 4

Views: 46

Answers (1)

Weafs.py
Weafs.py

Reputation: 22998

Because the default value of vertical-align(applies 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>

Upvotes: 5

Related Questions