I can’t tell why my wrapper div.plyr-div is taller than the player controls bar. The div appears to be 4px taller.
Can anyone tell where what is causing the div to be taller?
Hi,
The <media-controller> is a custom element with its own internal stylesheet. That stylesheet sets the element’s display property to inline-block. Inline-block elements are baseline-aligned by default, which reserves a few pixels of descender space beneath them. That’s why the wrapper appears slightly taller than the player.
You can override the component’s internal display property in your own stylesheet:
media-controller {
display: block;
}
Changing it to display: block removes the baseline gap, as shown in the screenshot.
Thanks so much! I saw the :host selector and did some quick fiddling with it, but not the right thing, obviously. I’ve never seen :host before.