Why `test` here has padding top and bottom if css says: `padding:0`?

But the main question is - clicking on the button there is no height animation of the digit - just the background is animated.

I need to animate `hieght` of the digit but so that **only lower half** of the digit remains visible. 

i.e. top half of `7` should be cutted.

Is it possible?

```js
$('button').on('click', function(){
let half = $('#test').height() / 2;
$('#test').animate({height: half}, 500);
})
```

```css
#test{
position:absolute;
font-size:14vw;
font-weight:bold;
background:gold;
margin:0;
padding:0;
}

#btn{
margin-left:54px;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>7</div>
<br>
<button id='btn'>CLICK</button>
```