CSS元素之间的随机空间

我最近开始在我自己的视频播放器上工作，但是，我似乎不能告诉我的视频元素和我的div元素之间的这个空间来自这里是我所指的图像。https://i.stack.imgur.com/mDknT.png(不能发布图像，所以我不得不发布一个链接到它)

My style:

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

您的<video>是一个内联元素，默认为垂直对齐(baseline)。

您可以将vertical-align与middle结合，或者更容易地使所有<video>块元素:

video {
   display: block;
}

http://jsfiddle.net/Atup4/

或者使用负边距

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

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

图像和视频是默认的内联元素，所以line-height是启用的，在它们下面留下空白。你只需要使主题显示:块，空白将消失。

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

直接减去边距:

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

相关内容

最新更新

热门标签：