Why does the browser itself draw an indent on SVG?

Question

css

The code:

The result in two browsers - you can see that the indentation from the bottom of the oval is different, it needs to be removed completely - that is, the SVG is perfectly aligned to the bottom of the parent block.

It is clear that I can remove some pixels in this case through bottom: -10px;or draw a full ellipse and cut off half (but actually a little less) through overflow: hidden;but this does not solve the root of the problem, these are crutches ...

Answer 1

Add just SVG style vertical-align:bottom to css

.ball svg{
  vertical-align:bottom;
}