html - 具有边界半径的子容器不占用父级高度

Question

我有一个 fiddle它试图在父级的中心放置一个绝对定位的圆。我必须以某种方式在子容器中提供额外的填充像素以覆盖父容器的高度。

有没有办法避免这个额外的像素。

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

欢迎提出任何其他建议!

Answer 1

问题是由您在 .buttonContainer 类中定义的字体大小引起的，它会在内容周围添加一些额外的填充。如果您将 line-height 设置为“24px”，则可以删除额外的像素(实际上您需要 2px 才能具有相同的高度)，如 this fiddle 中所示。 .

这是您更改后的代码:

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

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