Spazio libero nel menu in alto, come rimosso?[duplicato]
Domanda
Nel menu in alto " Le mie citazioni ..."su tutti i lati viene visualizzato lo spazio libero come la sua pulita e riempire completamente l'intera parte superiore?
HTML
<ul class="topPanel">
<li><h2>My Quotes</h2></li>
<li><h2>LOGIN WITH
<a href="#" class="underline">EMAIL</a>
OR
<a href="#" class="underline">TWITTER</a>
</h2>
</li>
</ul>
CSS
<!-- /*Main settings, background*/ -->
html {
background: url(http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/Rainbow-lanscape-nature-scenery-images-new-desktop-hd-wallpapers-landscape-widescreen.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
<!-- /*top panel contains a name for the project from the left side and the
ability to login via twitter and email*/ -->
.topPanel {
list-style: none;
margin: 0;
color: #ffffff;
background: #000000;
padding:0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
}
.topPanel li {
margin: auto;
}
.topPanel li h2 {
padding: 0 10px;
margin: 3px;
text-align: center;
}
/*Change the color of links when you hover*/
.underline {
color: #ffffff;
text-decoration: underline;
transition:color 1s;
-webkit-transition:color 1s;
}
.underline:hover {
color: #eb005f;
}
@media all and (max-width: 800px) {
.topPanel {
justify-content: space-around;
}
}
@media (max-width: 600px) {
.topPanel {
-webkit-flex-flow: column wrap;
}
}
Margin: 0
non funziona.Ho notato che a volte lo spazio non è mostrato che può essere?
Testato in Chrome e Firefox, la stessa situazione con visualizzazione errata. Visivamente, puoi vedere qui.
Soluzione
È necessario ripristinare il valore predefinito body
margine e imbottitura
body
{
margin:0;
padding:0;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow