影片周围有白色边框

Question

I can't get rid of the top and bottom white border of the video. 我无法摆脱视频的顶部和底部白色边框。 Video is set on width: 100%; 视频设置为宽度：100％； so there's no border on the left and right. 因此左右两侧没有边框。 When I set * (universal sizing) using margin: 0; 当我使用margin设置*（通用大小）时：0; everything bumps together, even two cards (kartica and kartica2), but I want them separated a bit. 一切都碰撞到一起，甚至两张卡（kartica和kartica2）也要碰撞，但我希望它们分开一点。

Then if I set margin: 0; 然后，如果我设置margin：0； all the other pages bump together. 其他所有页面都融合在一起。 Is there any way I can edit this with one selector(video selector is kartica2)? 有什么办法可以用一个选择器（视频选择器是kartica2）进行编辑吗？

This CSS sheet is universal, but for that specific page, content is at the top. 该CSS表单具有通用性，但是对于该特定页面，内容位于顶部。

 /*Naloga 1*/ * { box-sizing: border-box; /*universal box-sizing*/ } body, html { margin-left: 0px; /*zunanji odmik*/ margin-right: 0px; background-color: #b3b3ff; /*hex value*/ font-family: "Comic Sans MS", cursive, sans-serif; margin: 0px; /*drugace nastavi auto browser*/ } .sticky { position: sticky; /*glava na vrhu strani ko se premikamo navzdol*/ top: 0; } #h1 { padding: 10px; background-color: #ffcc00; color: #6600ff; text-align: center; margin: 0px; /*drugace nastavi auto browser*/ } #h2 { margin-left: 0px; margin-right: 0px; background-color: #ffcc00; color: #6600ff; text-align: center; padding: 5px; } #ul { background-color: #6600ff; } ul { list-style-type: none; /*oznake v seznamu*/ margin: 0; /*to remove browser default settings*/ padding: 0; /*to remove browser default settings*/ overflow: hidden; /* ce bi b boxsu bilo prevec vsebine*/ background-color: #1a1aff; /*barva navigacije*/ } li { float: left; } li a { display: block; /*kot block elements naredi celotno areo clickable-ne samo tekst*/ color: white; text-align: center; padding: 16px; text-decoration: none; /*skrijes podcrtano besedilo*/ } li a:hover { background-color: #000033; /*barva ozadja ko se postavimo z misko*/ } .vsebina { max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; } .kartica { background-color: white; margin-left: 1%; margin-right: 1%; } .kartica2 { background-color: white; /*kartica za video*/ margin-left: 1%; margin-right: 1%; } /*naloga 2*/ .n2 { width: 100%; } /*video*/ #n21 { margin-left: 10px; margin-right: 10px; } /*zunanji odmik clankov*/ .n22 { width: 100%; height: auto; } .n23 { text-align: center; } /*pripis pod sliko*/ /*naloga 3*/ #h3 { padding: 10px; margin: 0px; display: block; height: 40px; background-color: #ffcc00; color: #6600ff; text-align: center; } .column { float: left; width: 33%; /*ker so 3, ce bi bile 4 - 25%*/ padding: 5px; /* razmaki med karticami*/ margin-top: 10px; /*navigation bar to the content*/ } /* Clear floats after the columns, postavi 3x2 */ .row:after { content: ""; display: table; clear: both; } /* Responsive columns */ @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 20px; } } .slika3 { max-width: 100%; max-height: 100%; padding: 0px; margin: 0px; } .opis { margin: 0px; padding: 5px; height: 160px; overflow: scroll; /*Drsni trak*/ } /*Naloga 4*/ input[type=text], select { width: 100%; padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 20px; margin-top: 8px; margin-bottom: 8px; display: inline-block; box-sizing: border-box; border: 2px solid red; border-radius: 4px; } input[type=text]:focus, select:focus { border: 2px solid #555; } textarea { width: 100%; height: 150px; padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 20px; box-sizing: border-box; border: 2px solid red; border-radius: 4px; resize: none; /* prepreci spreminjanje polja*/ } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; margin-top: 10px; cursor: pointer; }

 <!DOCTYPE html> <html lang="si"> <head> <meta charset="UTF-8"> <title>Tilenova spletna stran</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="sticky"> <h1 id="h1">Tilenova spletna stran </h1> <ul id="ul"> <li><a href="index.html">Domov</a></li> <li><a href="ponudba.html">Ponudba</a></li> <li><a href="anketa.html">Anketa</a></li> <li><a href="https://estudij.um.si" target="_blank">Vaje</a></li> </ul> </div> <div class="vsebina"> <div class="kartica"> <h2 id="h2">O meni</h2> <p id="n21">Sem <a href="mailto:tilen.socic@gmail.com">Tilen Sočič</a> in študiram na <b>Fakulteti za elektrotehniko, računalništvo in informatiko</b>.</p> <p id="n21">To je moja spletna stran, ki je nastala pri predmetu <u>Osnove svetovnega spleta</u>.</p> <p id="n21">V prostem času se ukvarjam s športom in modifikacijo računalniskih delov.</p><br /> <!-- odstrani figure in odmiki se odstranijo --> <img class="n22" src="images/galaksija.jpg" alt="galaksija"> <figcaption class="n23">Slika nočnega neba</figcaption> </div> <div class="kartica2"> <h2 id="h2">Video: Spreminjanje mehurčka v led</h2> <video class="n2" controls> <source src="Videos/Mehurcek.mp4"> </video> <p id="n21">Video iz strani <a href="https://videos.pexels.com/videos/bubble-turning-into-ice-855627" target="_blank">PEXELS VIDEOS</a></p> </div> </div> </body> </html>

Answer 1

The problem is the #h2 ID, you need to add a margin-bottom: 0; 问题是#h2 ID，您需要在margin-bottom: 0;添加一个margin-bottom: 0;

#h2 {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffcc00;
    color: #6600ff;
    text-align: center;
    padding: 5px;
    margin-bottom: 0; /*Added*/
}

and also #n21 , here add a margin-top: 0; 还有#n21 ，这里添加一个margin-top: 0;

#n21 {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; /*Added*/
}

Let me know if that helps! 让我知道是否有帮助！ Here you have a codepen if you want to test it! 如果要测试，这里有一个Codepen！

影片周围有白色边框

问题描述

1 个解决方案

解决方案1
4 已采纳 2018-11-13 13:29:49

影片周围有白色边框

问题描述

1 个解决方案

解决方案1 4 已采纳 2018-11-13 13:29:49

解决方案1
4 已采纳 2018-11-13 13:29:49