javascript - 无法摆脱 div 上的白边-6ren

javascript - 无法摆脱 div 上的白边

转载作者：行者123 更新时间：2023-11-30 09:40:37

25

4

所以，我已经尝试了所有我能想到的方法来去除页面上所有内容周围的白边。

我已经把: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()">&#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>

最佳答案

如果您检查该元素，您会发现不需要的空间是因为以下样式将 padding 应用于所有 class 值包含 的元素col-.

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

覆盖样式，您可以摆脱不需要的空间。请注意，这会将值包含 col- 的所有类的 padding 设置为 0。

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

或者你只能重写 .col-12 的 padding，这会将 0 的 padding 应用到 .col-12 而另一个包含 col- 的类仍将获得 15px 的填充。

.col-12 {
  padding: 0;
}

关于javascript - 无法摆脱 div 上的白边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41325061/

25

4

0

文章推荐： javascript - Webpack 在 JS 文件中抛出一个奇怪的语法错误

文章推荐： javascript - 按 Enter react 组件

R:摆脱 for 循环和加速代码
我想在不使用函数 m 中的循环的情况下加快计算并获得结果.可重现的例子: N require(rbenchmark) > benchmark(m(r, N), + m1(r, N
crud - 摆脱 CRUD
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
cython - 摆脱 pyximport
我正在尝试使用 Cython。我使用 setup.py 并构建，而不是让 pyximport 执行此操作。但是，每次我导入模块时，似乎都会调用 pyximport 。 Pyximport 构建失败，一
Java - 摆脱 NullPointerException
考虑两个案例 case1 和 case2 以及两个方法 method1 和 method2。假设方法 1 解决案例 1，方法 2 解决案例 2。现在，我有一个程序可能以 case1 或 case2 结
c# - 摆脱 CA2202
我怎样才能摆脱 CA2202 警告(CA2202:Microsoft.Usage:对象“compressedStream”可以在方法“Compression.InternalDecompress(by
java - 摆脱 NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE？
我在这段代码中得到 NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE final Integer id = Ints.tryParse(idString); FailRea
java - 摆脱
我的 eclipse 中有 Java WebService 代码。我用过@WebService @Webmethod、@XmlElements、@XmlType、@XmlAccessorType 现在
java - 摆脱 `instanceof`
在我正在编写的基于 Sprite 的游戏中，二维网格中的每个字段都包含一堆 Sprite 。大多数情况下，最重要的是最重要的。在游戏的规则模块中，我有很多这样的代码: public boolean
java - 摆脱 if/else
在 Java 中，我必须设置一个带有值的 POJO 类。然而，要决定使用哪个 setter 函数，我必须取决于 if 条件。我当前的代码如下所示: // Code written in a funct
java - 摆脱 Optional [] 字符串？
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭去年。 Improve this
c++ - 摆脱 C++ 中令人讨厌的函数类型的可能方法？
所以我最近接触到了C++中所谓“令人厌恶的函数类型”的怪诞之处(据我所知源自这篇论文: https://www.open-std.org/jtc1/sc22/wg21/docs/papers/2015
qt - 摆脱 QScrollArea 中不必要的滚动条
我正在研究配置 QDialog。它有几个类别(General、Appearance 等)，当用户点击它们时会加载它们。每个类别都有自己的页面。这些页面本身就是独立的类(每个都有自己的 ui、cpp 和
vb.net - 摆脱 `My` 命名空间
我一直在开发 Vb.Net应用程序最近，我试图使它尽可能轻量级(即，使二进制文件尽可能小)。我已经完成了所有琐碎的工作，但是在使用 ILDasm 浏览二进制文件时，我注意到它有一个 My names
scala - 摆脱 sbt 生成的所有内容的艰难方法
An easy way to get rid of *everything* generated by SBT?要求一个简单的方法来清理从 sbt 生成的所有文件，但没有找到。我会要求一个艰难的。我如
antlr4 - 摆脱 token 识别错误
如何摆脱默认的 ANTLR 识别错误？我想用我自己的错误类而不是 ANTLR 的错误来写另一条消息。我的意思是是否有可能扩展某些 ANTLR 错误类以显示我自己的消息？更清楚地说，我不想在控制台
php - 摆脱 Woocommerce 订单查询
使用 woocommerce 的订单面板时，我注意到使用搜索执行了不必要的查询。这是对 Woocommerce 文件(/includes/data-stores/class-wc-order-data
r - 摆脱 R 中具有重复属性的行
我有一个包含列的大数据框，例如: ID, time, OS, IP 该数据帧的每一行对应一个条目。在某些 ID 的数据框中，存在多个条目(行)。我想摆脱那些多行(显然，对于相同的 ID，其他属性会有所
objective-c - 摆脱“由于设置了OBJC_DISABLE_GC而强制关闭GC”
当我运行测试时，我得到如下代码： objc[8845]: GC: forcing GC OFF because OBJC_DISABLE_GC is set 它还会污染我运行的子流程的输出。我如何摆脱
javascript - 摆脱 ie8 状态栏中的进度指示器
在 ie8 上，状态栏下方有一个绿色进度指示器，可能表示基于某处某个静态长度值的下载进度。不幸的是，由于“现代”动态 JavaScript、ajax 调用等的性质，该指示器经常会变得困惑，并且栏保持在
mvvm - 摆脱 VM 中的代理属性？
我现在正在学习 MVVM，但我了解的东西很少(这里有很多但很少..): 是否每个模型都可能(通过 VM)暴露给 View 有一个 VM？例如，如果我有一个 Contact 和 Address 实体并

首页

博学

6Ren·AI

商城

javascript - 无法摆脱 div 上的白边