html - 不能去掉margin，已经把margin设置为0了

Question

div 元素 id="textbox" 和 id="visualizer" 上有边距。我已经在 CSS 中将边距设置为 0，但它不会消失。您仍然可以在检查窗口中看到边距。我已经尝试更改容器 div 等中的显示类型，但问题仍然存在。您可以在下面的链接中找到附加的代码:

https://jsfiddle.net/kshatriiya/fhbqqmxc/1/

<div id="play-area">
    <div id="play-area-overlay">
        <div id="textbox">
            <h2>
                Welcolme. 

            </h2>
        </div>
        <div id="visualizer">   

        </div>
    </div>
    </div>
</div>

CSS:

#play-area {

position: relative;
width: 100vw;
height: 400px;
margin: 0 auto;


}

#play-area-overlay {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin: 0px;
width: 100%;

}

#textbox {

height: 100%;
width: 400px;
margin: 0px;

}

#visualizer {

height: 100%;
width: 50%;
margin: 0px;
}

Answer 1

这不是您在检查器中看到的边距，而是负空间，因为您的元素设置为使用 width: 50%;。默认情况下，div 元素是 block 级，这意味着它们将从新行开始。 float 将改变这种行为。

将 float: left 添加到您的 CSS(您可以合并这样的元素)，它们将并排组合在一起以形成 100% 的宽度。

#textbox,
#visualizer {
  height: 100%;
  width: 50%;
  margin: 0px;
  float: left;
}

这是一个完整的例子，其中的元素是彩色的，因此您可以看到它们并排放置:

window.onscroll = function() {
  var navbar = document.querySelector("#navbar");
  var Yoffset = this.pageYOffset;

  if (Yoffset > 0) {
    navbar.style.borderBottom = "1px solid rgba(0, 0, 0, 0.2)";
  } else {
    navbar.style.borderBottom = "";
  }
}

body,
html {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
}
#main-container {
  width: 100%;
  min-width: 100vw;
  height: 100%;
}
#mainscreen {
  width: 100vw;
  height: 100vh;
  margin: 0px auto;
}
#navbar-container {
  position: relative;
  width: 100vw;
  height: 68.53px;
}
#navbar {
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.6);
  color: #112D34;
  opacity: 0.8;
  z-index: 1;
}
#navbar #logo {
  padding: 0px 20px 0px 20px;
}
#navlinks ul {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  align-content: center;
  margin: 0px auto;
  padding: 0px;
  margin-right: 30px;
}
#navlinks ul li {
  list-style: none;
  margin: 10px 20px 10px 20px;
}
#play-area {
  position: relative;
  width: 100vw;
  height: 400px;
  margin: 0 auto;
}
#play-area-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  margin: 0px;
}
#textbox,
#visualizer {
  height: 100%;
  width: 50%;
  margin: 0px;
  float: left;
}
#textbox {
  background: lightblue;
}
#visualizer {
  background: lightgreen;
}
#playlist-container {
  width: 100vw;
  height: 600px;
}

<section id="main-container">
  <div id="navbar-container">
    <div id="navbar">
      <div id="logo">
        <h4><SPAN>V</SPAN>ibe<span>C</span>iti</h4>
      </div>
      <div id="navlinks">
        <ul>
          <li>About</li>
          <li>Playlist</li>
          <li>Gallery</li>
          <li>Portfolio</li>
          <li>
            <button>Contact</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="mainscreen">
    <div id="play-area">
      <div id="play-area-overlay">
        <div id="textbox">
          <h2>Welcolme.</h2>
        </div>
        <div id="visualizer">
        </div>
      </div>
    </div>
  </div>
  <div id="playlist-container">
  </div>
</section>