Div height not the same as child material icon

Question

I have this html code:

<div>
    <span class="material-icons">refresh</span>
</div>

The span is 24x24, however for some reason the parent div height is 28px, i have no other css, literaly just a blank html file, but for some reason the parent div is adding another 4px to its height even though the child span height is 24px. Anyone know why this is happening? I really dont want to have to set the height for the div.

Edit:

Parent Div

Icon

check the line height of the span and the line height of the div, they're might be different — Pete, Mar 18 '22 at 15:58
@Pete Don't have a line height defined. I added 2 pictures of the computed CSS of both elemens — ImAnonymous, Mar 18 '22 at 16:08

score 1 · Answer 1 · answered Mar 18 '22 at 18:03

1

I encounter this behavior as well when using Material Icons. I've solved this by setting the parent div to be display: flex;. That usually solves it in my use cases.

answered Mar 18 '22 at 18:03

vpjm3.0

43
1
6

Div height not the same as child material icon

1 Answers1