Kann weißen Rand auf divs nicht loswerden

Also habe ich alles versucht, was mir einfällt, um die weißen Ränder um alles auf meiner Seite loszuwerden.Kann weißen Rand auf divs nicht loswerden

Ich habe gestellt: margin: 0; auf alles, was ich denken kann und es immer noch nicht loswerden. Jede Hilfe wäre großartig!

Ich entschuldige mich für die riesige Wand des Codes.

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
    x.className += " responsive"; 
 
    } else { 
 
    x.className = "topnav"; 
 
    } 
 
}

/* global */ 
 

 
* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: sans-serif; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: "Tahoma", sans-serif; 
 
    font-size: 16px; 
 
    color: #454545; 
 
    background-color: #fff; 
 
} 
 

 
div { 
 
    margin: 0; 
 
} 
 

 

 
/* end global */ 
 

 

 
/* custom */ 
 

 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.footer { 
 
    padding: 5px 10px; 
 
    background-color: #428cd9; 
 
} 
 

 

 
/* end custom */ 
 

 

 
/* custom responsive */ 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 

 
.col-1 { 
 
    width: 8.33%; 
 
} 
 

 
.col-2 { 
 
    width: 16.66%; 
 
} 
 

 
.col-3 { 
 
    width: 25%; 
 
} 
 

 
.col-4 { 
 
    width: 33.33%; 
 
} 
 

 
.col-5 { 
 
    width: 41.66%; 
 
} 
 

 
.col-6 { 
 
    width: 50%; 
 
} 
 

 
.col-7 { 
 
    width: 58.33%; 
 
} 
 

 
.col-8 { 
 
    width: 66.66%; 
 
} 
 

 
.col-9 { 
 
    width: 75%; 
 
} 
 

 
.col-10 { 
 
    width: 83.33%; 
 
} 
 

 
.col-11 { 
 
    width: 91.66%; 
 
} 
 

 
.col-12 { 
 
    width: 100%; 
 
} 
 

 

 
/*end custom responsive */ 
 

 

 
/* navbar */ 
 

 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #428cd9; 
 
} 
 

 
ul.topnav li { 
 
    float: left; 
 
} 
 

 
ul.topnav li a { 
 
    height: 55px; 
 
    display: inline-block; 
 
    color: #454545; 
 
    padding: 0px 16px; 
 
    line-height: 3.0; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    font-size: 17px; 
 
    transition: 0.3s; 
 
} 
 

 
ul.topnav li a:hover { 
 
    background-color: #2162a6; 
 
    color: #757575; 
 
} 
 

 
ul.topnav li.icon { 
 
    display: none; 
 
} 
 

 

 
/* end navbar */ 
 

 

 
/* responsive navbar */ 
 

 
@media screen and (max-width:680px) { 
 
    ul.topnav li:not(: first-child) { 
 
    display: none; 
 
    } 
 
    ul.topnav li.icon { 
 
    float: right; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
@media screen and (max-width:680px) { 
 
    ul.topnav.responsive { 
 
    position: relative; 
 
    } 
 
    ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 

 

 
/* end responsive navbar */ 
 

 
@media screen and (max-width:680px) { 
 
    .nomobile { 
 
    display: none; 
 
    } 
 
    .yesmobile { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.header-img { 
 
    min-height: 300px; 
 
    background-image: url(http://thirdshiftdesigns.net/images/cabheader2.png); 
 
    background-repeat: no-repeat; 
 
    background-size: auto 100%; 
 
    background-position: center top; 
 
    /*padding: 40px; (If don't want to set min-height or some image content is there) */ 
 
} 
 

 
.end-header { 
 
    width: 100%; 
 
    height: 15px; 
 
    background-color: #428cd9; 
 
}

<body> 
 

 
    <div class="col-12"> 
 

 
    <ul class="topnav" id="myTopnav"> 
 
     <li><a href="#">Logo</a></li> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li class="icon"> 
 
     <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a></li> 
 
    </ul> 
 

 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <div class="header-img"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <div class="end-header"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <!-- end header --> 
 
    <!-- footer --> 
 
    <div class="col-12"> 
 
    </div> 
 

 
</body>

Quelle

2016-12-25 Daniel

Können Sie das konkretisieren? "Margins um alles" ist ziemlich vage. Sind Sie sicher, dass Sie die Ränder und nicht einige Abstände, die Sie auf andere Elemente angewendet haben, betrachten? – toniedzwiedz

reset padding auf die spezifische div sie wollen 'div.col-12 { padding: 0 }' https://jsfiddle.net/kfexozkh/3/ –

Wenn Sie das Element überprüfen, können Sie feststellen, dass der unerwünschte Raum wegen der folgenden Stil, die padding gilt, ist zu allen Elementen mit dem class Wert, der col- enthält.

[class*="col-"] { 
    float: left; 
    padding: 15px; 
}

Überschreiben Sie den Stil und Sie können den unerwünschten Raum loswerden. Beachten Sie, dass dies die padding für alle Klassen, deren Wert col- enthält, auf 0 setzt.

[class*="col-"] { 
    padding: 0; 
}

Oder Sie können nur überschreiben die padding von .col-12 die Polsterung von 0-.col-12 gelten, während die anderen Klassen col- enthält, wird nach wie vor ein Polster von 15px bekommen.

.col-12 { 
    padding: 0; 
}

Quelle

2016-12-25 22:51:57

das war es! das kleine "Col-" Bit – Daniel

Sie wickeln viele Elemente in einer .col-12 Klasse. Alle .col- Elemente sind in Ihrem CSS so eingestellt, dass sie 15px von padding an den Rändern enthalten. Hier ist ein Screenshot von der Überprüfung von der Seite in Chrome Developer Tools, wo Sie das Element sehen hervorgehoben:

Quelle

2016-12-25 22:50:47

Vielen Dank! Genau das war falsch. – Daniel

Sie müssen auf dem Element col-12 Padding auf 0 setzen.

Änderung folgende in Ihrem CSS

.col-12 { 
    width: 100%; 
}

.col-12 { 
    width: 100%; 
    padding: 0px; 
}

fiddle example here

Quelle

2016-12-25 22:54:51 tamak

das war es tatsächlich! Ich kann nicht glauben, dass ich das verpasst habe. -_- – Daniel

Ein Trick, den ich die ganze Zeit für solche Sachen verwende, ist Rechtsklick (mit Chrome Browser) auf den Problembereich/Leerraum und wähle INSPECT ... es werden die Chrome Dev Tools angezeigt, die die Eigenschaften für das Element zeigen und Sie können das spezifische Problem beheben. – tamak

Kann weißen Rand auf divs nicht loswerden

Antwort

Verwandte Themen