CSS 元素之间的随机空间答案

【问题标题】：CSS Random space between elementsCSS 元素之间的随机空间
【发布时间】：2014-09-15 20:45:05
【问题描述】：

我最近开始在自己的视频播放器上工作，但是，我似乎无法分辨我的视频元素和我的 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>

非常感谢任何帮助。

【问题讨论】：

你用的是什么浏览器？在 Chrome 中看起来不错（没有白条）
你怎么能称之为随机？每次在同一个地方重新加载...
@Bondye 我称它为“随机”，因为这是一个我不打算制作的空间，所以我称之为“随机”，顺便说一句，这是一个毫无意义的帖子。

标签： html css

【解决方案1】：

只需减去一点边距：

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

【讨论】：

【解决方案2】：

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

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

video {
   display: block;
}

http://jsfiddle.net/Atup4/

【讨论】：

【解决方案3】：

图像和视频默认是内联元素，因此启用 line-height，在它们下方留下空白。你只需要让主题显示：block，空白就会消失。

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

【讨论】：

【解决方案4】：

或使用负边距

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

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

【讨论】：