ボーダートップのスペース

Question

私のビデオにボーダーを追加すると、上に正しく表示されません。いくらかのスペースがあります。どうすれば削除できますか？

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

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

Answer 1

おそらく私はあなたがmarginとpaddingを設定しなかったためであると考える問題に

.video-content video { 
    display: block; 
} 

Answer 2

を修正するvideo要素display: blockを作ります体。これをCSSに追加してみてください：

body { 
    margin: 0; 
    padding: 0; 
} 

Answer 3

不要な動作をしたくない場合は、必ずCSSリセットルールを追加してください。

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

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

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

は

Answer 4

用表示：below.Itのような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; 
    }