边框半径不带父高度的子容器

Question

I have a fiddle which tries to place a absolute positioned circle at the center of the parent. Somehow I have to give an extra pixel of padding in the child to cover the height of the parent container.

Is there a way to avoid this extra pixel.

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

Any other suggestions are most welcome!

Answer 1

The problem is caused by the font-size you define in your .buttonContainer class which will add a bit of extra padding around the contents. If you set a line-height of "24px", you can remove the additional pixel (in fact you would have needed 2px to have the same height) as can be seen in this fiddle .

Here's your changed code:

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

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