无法摆脱div的空白边距
[英]Can't get rid of white margin on div's
问题描述
So, I have tried everything I can think of to get rid of the white margins around everything on my page. 
因此，我尝试了所有可以想到的方法，以消除页面上所有内容周围的空白。
I have put: margin: 0; 我已经输入： margin: 0; on everything I can think of and it still does not get rid of it. 在我能想到的一切上，它仍然没有摆脱它。 Any help would be great! 任何帮助将是巨大的！
I apologize for the giant wall of code. 我为庞大的代码墙表示歉意。
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>
3 个解决方案
解决方案1
3 已采纳 2016-12-25 22:51:57
If you inspect the element, you can find that the unwanted space is because of the following style which applies padding to all elements with the class value containing col- . 如果检查元素，则会发现不需要的空间是由于以下样式，该样式将padding应用于具有col-的class值的所有元素。
[class*="col-"] {
float: left;
padding: 15px;
}
Override the style and you can get rid of the unwanted space. 覆盖样式，您可以摆脱不想要的空间。 Note that this will set the padding to 0 for all the classes whose value contains col- . 请注意，这会将所有其值包含col-的类的padding设置为0。
[class*="col-"] {
padding: 0;
}
Or you can only override the padding of .col-12 which will apply padding of 0 to .col-12 while the other classes containing col- will still get a padding of 15px. 或者，您只能覆盖.col-12的padding ，这会将0填充到.col-12而其他包含col-类仍将填充15px。
.col-12 {
padding: 0;
}
解决方案2
1 2016-12-25 22:50:47
You're wrapping many elements in a .col-12 class. 您将许多元素包装在.col-12类中。 All .col- elements are set in your CSS to contain 15px of padding around the edges. 所有.col-元素都在CSS中设置为在边缘周围包含15px的padding 。 Here's a screenshot from inspecting the page in Chrome Developer Tools where you can see the element highlighted: 这是检查Chrome开发者工具中页面的屏幕截图，您可以在其中看到突出显示的元素：
解决方案3
0 2016-12-25 22:54:51
You need to set padding to 0 on the col-12 element. 您需要在col-12元素上将padding设置为0。
change the following in your CSS 在CSS中更改以下内容
.col-12 {
width: 100%;
}
to 至
.col-12 {
width: 100%;
padding: 0px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.