CSS元素之间的随机空间

本文介绍了CSS元素之间的随机空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最近开始在我自己的视频播放器上工作，但是，我似乎无法分辨出我的视频元素和我的div元素之间的空间来自这里是我所指的是什么的图像。（无法发布图片，我必须发布一个链接）

我的造型：

  code>）。
 
 
 你可以 vertical-align 它与中间或更容易让所有< video>  s块元素： 
 
 
  video {
 display：block; 
} 
  
  
 
i've recently started working on my own video player for fun however, I can't seem to tell where this space between my video element and my div elements is coming from here is an image of what i'm referring to. http://i.imgur.com/PfRT05j.png (Can't post an image so I had to post a link to it)
My styling: 
*
{
    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;
}
Here is my html document:
<!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>
Any help is much appreciated.
 解决方案 
Your <video> is a inline element which has a vertical-align by default (baseline).
You can either vertical-align it with middle or easier make all <video>s block elements:
video {
   display: block;
}
http://jsfiddle.net/Atup4/
                        这篇关于CSS元素之间的随机空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！