Question

我最近开始在我自己的视频播放器上工作，但是，我似乎无法分辨我的视频元素和我的div元素之间的空间来自这里是我所指的图像。 http://i.imgur.com/PfRT05j.png（无法发布图片，因此我必须发布一个链接）

我的造型：

*
{
    padding: 0;
    margin: 0;
}
div#player_container
{
    width: 1280px;
    margin: 0 auto;
}

video
{
    background-color: #000;
}

div#player_controls
{
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #383B42;
}

div#player_seekbar
{
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #3066DB;
    z-index: 2;
}

div#player_buffered_bar
{
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #DEDEDE;
    z-index: 1;
}

这是我的html文档：

<!DOCTYPE html>
<html>
    <head>
        <title>Player - Version: 0.1a</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>

        <div id="player_container">

            <video id="player" width="1280" height="720">

                <source src="test_video.mp4" type="video/mp4">
                <source src="test_video.ogg" type="video/ogg">
                Your browser does not support the video tag.

            </video>

            <div id="player_controls">

                <div id="player_seekbar"></div>

                <div id="player_buffered_bar"></div>

            </div>

        </div>

    </body>
</html>

非常感谢任何帮助。

Answer 1

您的<video>是一个内联元素，默认情况下具有垂直对齐（baseline）。

您可vertical-align使用middle或更轻松地制作所有<video>块元素：

video {
   display: block;
}

http://jsfiddle.net/Atup4/

Answer 2

或使用否定保证金

div#player_controls
{
    position: relative;
    width: 100%;
    height: 40px;
    margin:-5px;
    background-color: #383B42;
}

http://jsfiddle.net/VOXRAZR/y4H2Z/

Answer 3

默认情况下，图片和视频是内联元素，因此启用了行高，在其下方留下了这个空白区域。你只需要制作主题显示：阻止，空格就会消失。

http://dabblet.com/gist/8580610c930fee1d05d6

Answer 4

只需稍微减去边距：

div#player_seekbar
{
    position: absolute;
       margin-top: -4px;
    width: 100%;
    height: 10px;
    background-color: #3066DB;
    z-index: 2;
}

div#player_buffered_bar
{
    position: absolute;
       margin-top: -4px;
    width: 100%;
    height: 10px;
    background-color: #DEDEDE;
    z-index: 1;
}

CSS元素之间的随机空间

4 个答案: