display: inline-block adds vertical padding

Question

I have the following HTML and CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

and when I use inline-block in my CSS it looks like this:

but without display:inline-block it looks like this (which is perfectly okay, presuming display is block by default):

So where does this vertical padding come from?

This question is already answered in: https://stackoverflow.com/questions/27618000/why-ul-adds-extra-top-margin — pegla, Aug 21 '17 at 17:29

score 3 · Accepted Answer · answered Aug 21 '17 at 17:25

The padding comes from your unordered list and collapsing margins. When you don't have display: inline-block on the parent (div.row), that div displays as a block element by default and the margins collapse. You can see this by applying the standard remedy for collapsing margins by adding overflow: auto to the div.row element.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
  overflow:auto;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

The easiest way to get rid of that extra space is to set the margin to zero on the <ul>.

score 0 · Answer 2 · answered Aug 21 '17 at 17:55

The margin comes from ul's default margin, whenever I've removed the margin from the ul, it aligned like you wanted.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  display: inline-block;
}

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

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

display: inline-block adds vertical padding

2 Answers2