html - small gap between divs

Question

i have tried setting font size to 0 there are no margin or padding only content box yet it still has small gaps between divs any idea why is this happening? and is there any solution to fix this because i expect it to have no gaps since there are no margin padding

there is also gap inside .video that i use to contain iframe, i set the iframe to 100% height so it take the full height of .video container but the problem is when i take a look at the element box of .video the height was 158px and when i take a look at the iframe it was 154px why does it behave this way?

 .video-section-wrapper {
        width: 100%;
        height: 300px;
        background-color: whitesmoke;
        position: absolute;
        top: 180px;
        border-radius: 4px;
        border-top: orange 5px solid;
        border-bottom: orange 5px solid;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .video-section-box {
        height: 90%;
        width: 27%;
        border: solid black 5px;
        box-sizing: border-box;
        box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5),-1px -1px 2px 2px rgba(0,0,0,0.5);
        transition: ease-in-out 0.5s;
        overflow: hidden;
    }

    .video-section-box:hover {
        height: 93%;
        width: 30%;
    }

    .video-section-box > .video {
        width: 100%;
    }

    .video-section-box > .video > iframe {
        width: inherit;
        box-sizing: content-box;
        border: none;
        height: 100%;
    }

    .video-section-box > .subtitle-wrapper {
        border-top: rgba(0,0,0,0.5) solid 5px;
        height: 92px;
        width: 100%;
        position: relative;
    }

    .video-section-box > .subtitle-wrapper > .subtitle-header {
        padding-left: 5px;
        background-color: white;
        box-sizing: border-box;
        padding-bottom: 0px;
        margin-bottom: 0px;
        border-bottom: 0px;
    }

    .video-section-box > .subtitle-wrapper > .subtitle-header > h {
        background-color: black;
        color: wheat;
        font-weight: bold;
        background-size: 300px 300px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .video-section-box > .subtitle-wrapper > .subtitle-content {
        background-color: black;
        margin: 0px;
        outline: 0px;
        height: 84px;
        color: wheat;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .capo-wrap {
        font-size: 17px;
        position: absolute;
        color: wheat;
        display: flex;
        align-items: flex-end;
        height: 78px;
    }

    .capo-wrap > p{
        margin: 0px;
    }

    .video-section-box > .subtitle-wrapper > .subtitle-content > .p {
        margin: 0px;
        padding-top: 0px;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bolder;
        font-size: 30px;
    }

    <div class="video-section-box">
      <div class="video">
          <iframe>

          </iframe>
      </div>

      <div class="subtitle-wrapper">
          <div class="subtitle-header">
              <h>TUNING</h>                    
          </div>

          <div class="capo-wrap"><p>Capo Fret :</p></div>

          <div class="subtitle-content">
              <div class="p">E A D G B E</div>
          </div>                    
      </div>
   </div>

question from:https://stackoverflow.com/questions/65877778/small-gap-between-divs

Answer 1

Add display: inline-block to .video-section-box > .subtitle-wrapper > .subtitle-header > h selector. Like that:

.video-section-box > .subtitle-wrapper > .subtitle-header > h {
    ...
    display: inline-block;
}