Дочерний контейнер с границей радиуса не принимает родительскую высоту

Question

У меня есть скрипка , которая пытается поместить круг с абсолютным позиционированием в центр родителя.Почему-то мне нужно добавить дополнительный пиксель отступа в дочернем элементе, чтобы покрыть высоту родительского контейнера.

Есть ли способ избежать этого лишнего пикселя.

padding: ($padding + 1); /*need to avoid this addition of 1 pixel*/

Любые другие предложения приветствуются!

Answer 1

Проблема вызвана размером шрифта, который вы определили в своем классе .buttonContainer, что добавит немного дополнительного отступа вокруг содержимого. Если вы установите line-height в «24px», вы можете удалить дополнительный пиксель (фактически, вам понадобится 2px, чтобы иметь ту же высоту), как это видно в этой скрипке .

Вот ваш измененный код:

.buttonContainer {
  /* ... */
  line-height: 24px;
  /* ... */
}

.buttonCounter {
  /* ... */
  padding: ($padding);
  /* ... */
}