Question

如何从div标签中删除额外的边距。

我已将margin和padding添加到0px。定位在保证金方面也很重要吗？即使我想在这个div中给出保证金，那么我应该在vw或百分比中给出哪个单位？请帮助解决此问题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-3.2.1.min.js"></script>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }
    
    #menubar {
      margin: 0;
    }
    
    #menubar ol li {
      color: white;
      float: left;
      list-style: none;
      padding: 0.5em 0.3em;
      background-color: #007ac2;
      padding-top: 1em;
      padding-right: 45px;
    }
  </style>
</head>

<body>
  <div id="menubar">
    <ol>
      <li id="abouthover"><a href="#">ABOUT US</a>
        <div class="arrow-up">
        </div>
      </li>
      <li id="innovationhover"><a href="#">INNOVATION</a>
        <div class="arrow-up2"></div>
      </li>
      <li id="capabilitieshover"><a href="#">CAPABILITIES</a>
        <div class="arrow-up3"></div>
      </li>
      <li id="careerhover"><a href="#">CAREER</a>
        <div class="arrow-up4">
        </div>
      </li>
      <li id="investorhover"><a href="#">INVESTOR RELATIONS</a>
        <div class="arrow-up5"></div>
      </li>
    </ol>
  </div>

</body>

</html>

Answer 1

您必须指定HTML文档的边距和填充，以及*（所有内容）。请参阅下面的代码段。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-3.2.1.min.js"></script>
  <style type="text/css">
    /* FROM HERE */
    
    *,
    html {
      padding: 0;
      margin: 0;
    }
    /* TO HERE */
    
    body {
      padding: 0;
      margin: 0;
    }
    
    #menubar {
      margin: 0;
    }
    
    #menubar ol li {
      color: white;
      float: left;
      list-style: none;
      padding: 0.5em 0.3em;
      background-color: #007ac2;
      padding-top: 1em;
      padding-right: 45px;
    }
  </style>
</head>

<body>
  <div id="menubar">
    <ol>
      <li id="abouthover"><a href="#">ABOUT US</a>
        <div class="arrow-up">
        </div>
      </li>
      <li id="innovationhover"><a href="#">INNOVATION</a>
        <div class="arrow-up2"></div>
      </li>
      <li id="capabilitieshover"><a href="#">CAPABILITIES</a>
        <div class="arrow-up3"></div>
      </li>
      <li id="careerhover"><a href="#">CAREER</a>
        <div class="arrow-up4">
        </div>
      </li>
      <li id="investorhover"><a href="#">INVESTOR RELATIONS</a>
        <div class="arrow-up5"></div>
      </li>
    </ol>
  </div>

</body>

</html>

希望这有帮助！

Answer 2

由于浏览器默认设置，这种情况正在发生。将以下内容添加到样式表中。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-3.2.1.min.js"></script>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }
    
    #menubar {
      margin: 0;
    }
   #menubar a{
      text-decoration:none;
      color: white;
    }
   #menubar ol {
     margin:0;
     padding:0;
   }
    #menubar ol li {
      color: white;
      float: left;
      list-style: none;
      padding: 0.5em 0.3em;
      background-color: #007ac2;
      padding-top: 1em;
      padding-right: 45px;
    }
  </style>
</head>

<body>
  <div id="menubar">
    <ol>
      <li id="abouthover"><a href="#">ABOUT US</a>
        <div class="arrow-up">
        </div>
      </li>
      <li id="innovationhover"><a href="#">INNOVATION</a>
        <div class="arrow-up2"></div>
      </li>
      <li id="capabilitieshover"><a href="#">CAPABILITIES</a>
        <div class="arrow-up3"></div>
      </li>
      <li id="careerhover"><a href="#">CAREER</a>
        <div class="arrow-up4">
        </div>
      </li>
      <li id="investorhover"><a href="#">INVESTOR RELATIONS</a>
        <div class="arrow-up5"></div>
      </li>
    </ol>
  </div>

</body>

</html>

＆＃13;

Answer 3

试试这个：

ol {
    margin: 0;
    padding: 0;
}

body {
  padding: 0;
  margin: 0;
}

#menubar {
  margin: 0;
}

#menubar ol li {
  color: white;
  float: left;
  list-style: none;
  padding: 0.5em 0.3em;
  background-color: #007ac2;
  padding-top: 1em;
  padding-right: 45px;
}

ol {
  margin: 0;
  padding: 0;
}

<div id="menubar">
  <ol>
    <li id="abouthover"><a href="#">ABOUT US</a>
      <div class="arrow-up">
      </div>
    </li>
    <li id="innovationhover"><a href="#">INNOVATION</a>
      <div class="arrow-up2"></div>
    </li>
    <li id="capabilitieshover"><a href="#">CAPABILITIES</a>
      <div class="arrow-up3"></div>
    </li>
    <li id="careerhover"><a href="#">CAREER</a>
      <div class="arrow-up4">
      </div>
    </li>
    <li id="investorhover"><a href="#">INVESTOR RELATIONS</a>
      <div class="arrow-up5"></div>
    </li>
  </ol>
</div>

无法提供0px保证金

3 个答案: