HTML: Why Video Cover Exceeds Its Bottom Border?

I am trying to show a purple cover over the

Solution 1:

All inline elements can safely be considered letters in document flow. When you type a b c, you expect the browser to render the spaces between your letters.

Similarly, with inline elements, the browser renders the spaces around them (video has a default display value of inline):

<div class="media-cover">
   <video class="cmedia-box" controls>...</video>
</div>

... will render such a space after the element, before the </div> is closed. To tell the browser not to render it, you have multiple options:

a) don't add a space there:

<div class="media-cover">
   <video class="cmedia-box" controls>...</video
></div> 

Note there's not space between the ending of video tag > and beginning of closing </div>.

b) give the display:inline a block level value (setting display:block on video will fix it.

c) float the inline element (i.e.: float:left on video will fix it.