边境顶部的空间

Question

当我为我的视频添加边框时，它在顶部显示不正确。有一些空间。我该如何删除它？

＆＃13;

＆＃13;

.video-content {
    border: 10px solid #2f2f2f;
}

＆＃13;

<div class="col-lg-12">
   <div class="embed-responsive embed-responsive-16by9 video-content">
      <video src="video/Portfolio-landing.mov" controls></video>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为这是因为你没有在身体中设置margin和padding。尝试将此添加到您的CSS：

body {
    margin: 0;
    padding: 0;
}

Answer 2

使用display：inline-block for div，如下所示。它会正常工作

 <div class="col-lg-12">
           <div class="video-content">   
              <video class="fullscreen-bg__video" src="http://techslides.com/demos/sample-videos/small.webm" controls></video>
           </div>



    .video-content {
        border: 10px solid #2f2f2f;
        position:relative;
       display:inline-block;
    }

Answer 3

制作视频元素display: block可能会解决问题

.video-content video {
    display: block;
}

Answer 4

如果您不想要这些不受欢迎的行为，请务必添加CSS重置规则。

＆＃13;

＆＃13;

*{
   margin:0px;
   padding:0px
 }

.video-content {
    border: 10px solid #2f2f2f;
}

＆＃13;

<div class="col-lg-12">
   <div class="embed-responsive embed-responsive-16by9 video-content">
      <video src="video/Portfolio-landing.mov" controls></video>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;