1
私は、私のページのすべての周りの白いマージンを取り除くために考えることができるすべてを試しました。divの白い余白を取り除くことができません
私は考えることができるすべてにmargin: 0;を入れましたが、それでもそれを取り除くことはできません。どんな助けも素晴らしいだろう！
私はコードの巨大な壁に謝ります。
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()">☰</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>
にあなたのCSSに次のあなたは、より具体的にすることはできますか？ 「すべての周りのマージン」はかなり曖昧です。あなたはマージンを見ていて、他の要素に適用したパディングは見ていませんか？ – toniedzwiedz
あなたが望む特定の部門のパッドをリセットする 'div.col-12 { 埋め込み：0 }' https://jsfiddle.net/kfexozkh/3/ –