CODEWITHSUNDEEP
css
CaptSaltyJack
CaptSaltyJack

Reputation: 16035

Why are these inline-block elements outside their container?

As illustrated here:

http://jsbin.com/vavuvo/2

HTML

<div class="color-bar">
  <span></span><span></span><span></span>
</div>

LESS

.color-bar {
  display: block;
  height: 5px;
  border: 1px solid red;

  > span {
    display: inline-block;
    height: 5px;
    width: 25%;
  }

  > span:nth-child(1) {
    background: blue;
  }
  > span:nth-child(2) {
    background: green;
  }
  > span:nth-child(3) {
    background: purple;
  }
  > span:nth-child(4) {
    background: orange;
  }
}

Upvotes: 1

Views: 132

Answers (1)

Stickers
Stickers

Reputation: 78686

The default value for vertical-align is baseline. just set it to top instead.

http://jsfiddle.net/06z63n7L/

.color-bar > span {
    display: inline-block;
    height: 5px;
    width: 25%;
    vertical-align: top;
}

Upvotes: 2

Related Questions