神秘的缩进元素视频

Question

我无法理解缩进标记视频的来源，其中的块具有类сontrols。我需要让这个单位失灵，他跳出界限。如何将单元与类进度条包装器对齐？

<div class="video-wrapper">
<video id="movie">
    <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
<div class="controls">
    <button class="play-pause">Play</button>
    <span class="progress-bar-wrapper">
        <span class="progress-bar"></span>
    </span>
    <span class="display-status"></span>
</div>

以下是沙箱的链接：http://jsfiddle.net/gztmcyxg/

Answer 1

这个问题可能很烦人。通常在对象具有内联块显示时发生。我不确定为什么会发生这种情况。

解决这个问题的一种方法是在包装器中将font-size设置为0：

.video-wrapper {
    font-size: 0;
}
.controls {
    /* be sure to reset the font-size for your controls */
    font-size: 1rem;
}

http://jsfiddle.net/gztmcyxg/2/

Answer 2

找到了更好的解决方案：

http://jsfiddle.net/gztmcyxg/3/

video {
    vertical-align: top; //or middle
}

默认值（基线）会导致该间距。不知道为什么。