The example below shows a `<button>` element whose parent's height is not the height of the button. What's the best way to remove this excess height while remaining semantic and also keeping the `<button>` inline?

If I set the button to `display:block` then the excess height is removed. If I set the parent's font-size to 0, then it is also removed. If I change the `<button>` to a `<div>` element, then it is fixed as well. Should I just not be semantic?

I have tested this under the stable version of Google Chrome.

```css
.box {
  height: 30px;
  width: 30px;
  background-color: green;
}
.outer {
  background-color: blue;
}
button {
  border: 0;
  margin: 0;
  padding: 0;
}
```

```html
<div class='outer'>
  <button class='box'></button>
</div>
```