神秘的缩进元素视频

Question

我无法理解缩进标签视频的来源，其中带有 class сontrols 的块。我需要让这个单位倒下，他跳出界外。还有什么方法可以使该单元与 class progress-bar-wrapper 对齐？

<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>

这里是沙盒 link：http://jsfiddle.net/gztmcyxg/

Answer 1

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

解决此问题的一种方法是在包装器中将字体大小设置为 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
}

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

神秘的缩进元素视频

The enigmatic indent element video

html

css

video