div之間的小間隙

Question

我嘗試將字體大小設置為 0，沒有邊距或僅填充內容框，但 div 之間仍然存在小間隙，知道為什么會這樣嗎？ 是否有任何解決方案來解決這個問題，因為我希望它沒有間隙，因為沒有邊距填充

我用來包含 iframe 的里面也有間隙是 158 像素，當我查看 iframe 時，它是 154 像素，為什么會這樣？

 .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">EADGB E</div> </div> </div> </div>

Answer 1

將display: inline-block添加到.video-section-box >.subtitle-wrapper >.subtitle-header > h選擇器。 像那樣：

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

Answer 2

更改邊距-底部：0px； 到邊距底部：-1px； 在.video-section-box >.subtitle-wrapper >.subtitle-header {

 .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: -1px; 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; display: inline-block; }

 <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">EADGB E</div> </div> </div> </div>