Line height inline-block

by kmouse

HTML

<div class="wrapper">
		X <div>Start Game</div><br/>
		X <div>High Scores</div><br/>
		X <div>Options</div>
</div>

<div class="wrapper scroll-container">
		X <div>Start Game</div><br/>
		X <div>High Scores</div><br/>
		X <div>Options</div>
</div>

<div class="wrapper scroll-container offset-up">
		X <div>Start Game</div><br/>
		X <div>High Scores</div><br/>
		X <div>Options</div>
</div>

Normally, an image element has spacing below it due to the parent font descent.
<div class="wrapper tight">
		<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star" width="16" height="16">
</div>
This can be removed with zero line-height.
<div class="wrapper tight" style="line-height: 0">
		<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star" width="16" height="16">
</div>
Or by making the image use block display.
<div class="wrapper tight">
		<img style="display: block;" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star" width="16" height="16">
</div>

CSS

.wrapper {
  width: 800px;
  overflow: auto;
  resize: both;
  background-color: #eee;
  border: 8px solid #ccc;
  padding: 15px;
  margin-bottom: 2em;
  font-size: 16px;
}
.tight { padding: 0; }
.wrapper > div {
  display: inline-block;
  background: #fcc;
  border: 1px solid #999;

  box-sizing: border-box;
  width: 150px;
  line-height: 35px;

  text-align: center;
}
.scroll-container > div { overflow: auto; }
.offset-up > div { vertical-align: -12px; }
.line-height > div { vertical-align: middle }