div元素左侧的间隙答案

【问题标题】：gaps on left side of div elementdiv元素左侧的间隙
【发布时间】：2020-09-13 19:35:03
【问题描述】：

我已尝试将边距和填充都设置为 0，但左侧仍有间隙。

我在填充上尝试了 0，这往往会使我的条形太窄，不符合我的口味，但仍然无法修复左侧的事实差距。我似乎找不到一个地方说除了填充 0 之外可以做任何事情；和边距0；所以我有点不知所措。这可能是我完全忽略了。

让我的标题随着我的页面上下移动然后锁定到顶部的 javascript

window.onscroll = function() {
  getsticky()
};
var header = document.getElementById('myHeader');
var sticky = header.offsetTop;

function getsticky() {
  if (window.pageYOffset > sticky) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
}

.header {
  background-color: #141414;
  padding: 10px 16px;
  border-radius: 5px;
  width: 100%;
  margin: 0;
  border-right: 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.Buttons {
  background-color: #141414;
  border: none;
  color: white;
  font-size: larger;
  font-weight: bold;
  padding: 20px 24px text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px
}

a {
  color: white;
  text-decoration: none;
}

<div class='header' id="myHeader">
  <H2><button class="Buttons"><a href = 'Pricing.html'>Pricing!</a></button>
    <button class="Buttons"><a href = 'About me.html'>About me</a></button>
    <button class="Buttons"><a href = 'placeholder.html'>Contact me!</a></button>
  </H2>
</div>

<div style="height:2000px">
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
</div>

【问题讨论】：

为什么不定位：固定，那么就不需要javascript

标签： javascript html css

【解决方案1】：

也许你的问题是这样的。

 body{
   margin:0!important
 }

window.onscroll = function() {
  getsticky()
};
var header = document.getElementById('myHeader');
var sticky = header.offsetTop;

function getsticky() {
  if (window.pageYOffset > sticky) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
}

body {
  margin: 0!important
}

.header {
  background-color: #141414;
  padding: 10px 16px;
  border-radius: 5px;
  width: 100%;
  margin: 0;
  border-right: 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.Buttons {
  background-color: #141414;
  border: none;
  color: white;
  font-size: larger;
  font-weight: bold;
  padding: 20px 24px text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px
}

a {
  color: white;
  text-decoration: none;
}

<div class='header' id="myHeader">
  <H2><button class="Buttons"><a href = 'Pricing.html'>Pricing!</a></button>
    <button class="Buttons"><a href = 'About me.html'>About me</a></button>
    <button class="Buttons"><a href = 'placeholder.html'>Contact me!</a></button>
  </H2>
</div>

<div style="height:2000px">
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
  <p>Scroll</p>
</div>

【讨论】：

在答案中有演示总是更好。
没问题 :) @BlackestNight mark 回答了 :) 很高兴我帮助了你。
@mplungjan 我做了什么没有让它成为演示？
@BlackestNight 他回答了我的回答而不是你的问题 :) 我没有在这里输入演示，而是作为 URL
@BlackestNight 但是是的，我也必须从您的代码中创建一个 sn-p。现在你知道了

【解决方案2】：

正如 Lubo Masura 所解释的，您的问题的原因是在 html 元素的主体上自动设置了边距。

我做了一个演示，你可以在这里找到：https://codesandbox.io/s/stupefied-wilson-92657?file=/index.html

我将链接的背景更改为蓝色，以便您可以看到链接的位置。

注意到我更新了您的标记和样式以简化它，因为有几件事可以改进：

最佳做法是始终以第一个字母为小写来命名您的类
尽量避免嵌套在按钮内的链接，它们不是必需的，主要是在这种情况下
如果您想在链接上添加 h2，请为每个链接添加，而不是包含所有链接（用于 SEO 实践）
尝试使用您使用的样式极简主义；如果不需要它们，请不要使用它们来使您的代码更清晰、更易于理解

【讨论】：