CSS - Height mismatch between inner div and wrapper div

Question

I have an html file similar to the following. The wrapper div of the video tag has more height than necessary.

body {
  margin: 0 0 0 0;
  overflow: hidden;
}

div.small-wrapper {
  background-color: green;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
  max-height: 250px;
  max-width: 250px;
  overflow: hidden;
  outline: 1px solid red;
}

div#wrapperOne {
  background-color: #0c0c0c;
}

div.big-wrapper {
  background-color: grey;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 50;
}

#videoOne {
  /* Fit video*/
  width: 100%;
  height: 100%;
  outline: 1px solid cyan;
}

<div class="small-wrapper">
  <div id="wrapperOne">
    <video id="videoOne" src="https://www.w3schools.com/html/mov_bbb.mp4" muted></video>
  </div>
</div>
<div class="big-wrapper">
</div>

#wrapperOne is 250px by 141px but #videoOne is only 250px by 137.5px

The same styling in my application with 1280*720px video has 5px extra. The sample html I created has 3.5px extra.

I can' find from where does the extra height comes from. Any ideas?

`vertical-align: top;` to the video – Temani Afif Sep 19 '19 at 10:05 — Temani Afif, Sep 19 '19 at 10:05

score 2 · Answer 1 · answered Sep 19 '19 at 07:23

2

this is due to the line-height of your wrapperOne. Try adding this css:

#wrapperOne{
  line-height:0;
}

Greetings

answered Sep 19 '19 at 07:23

score 1 · Answer 2 · answered Sep 19 '19 at 08:46

1

This will solve your Problem..

Make this change in your CSS, in your #videoOne block.

#videoOne {

    width: 100%;
    height: 100%;
    outline: 1px solid cyan;
    display: block;

}

answered Sep 19 '19 at 08:46

gautam

96
1
14

score 0 · Answer 3 · answered Sep 19 '19 at 07:32

I copied your code to an external jsfiddle and investigated a little. It seems that the container with

id=wrapperOne

was in display block, along with the video element this extra space was caused.

Jsfiddle attached, By changing it to display flex I was able to solve your problem:

display: flex

instead of

display: block

Which is the default display value for the video element container.

Enjoy

CSS - Height mismatch between inner div and wrapper div

3 Answers3