Из-за чего в примере элементы label выходят за родительский div?

Question

[Максим]

Привет умным головам!
Растолкуйте, пожалуйста, вот такую, наверняка для вас простую ситуацию:

Внутри дива высотой 10px три лэйбла в виде кружков. Эти лэйблы размером 10х10px.
Почему эти лэйблы выезжают за рамки родительского дива?

<div class="slider__controls">
  <label></label>
  <label></label>
  <label></label>
</div>

* {
  box-sizing: border-box;
  outline: 1px solid red;
}

.slider__controls {
  position: absolute;
  top: 95px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 10px;
  text-align: center;
}

label {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #c1c1c1;
  border: 3px solid #000;
  border-radius: 50%;
}

Скрин:


Большое спасибо откликнувшимся!

Answer 1

[Евгений]

В Хроме у меня так же, в Лисе все нормально, попробуйте добавить для лейблов выравнивание:
vertical-align: top;
У меня получилось так:

Comments

[Максим]

Спасибо! :) Забыл совсем про выравнивание! Отлично! :)

Answer 2

[Ксения Михайлова]

Добавьте еще font-size: 0; для обертки инлайновых элементов: это уберет отступ сверху и между элементами (пробелы в разных браузерах могут быть разными по ширине, если мне не изменяет память). Отступы между элементами можно сделать margin.

Comments

[Максим]

Очень ценно, спасибо :) Добавил :)

Answer 3

[Сергей Горячев]

Что, простите?