无法去除边距，已经将边距设置为 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-level，这意味着它们将从新行开始。浮动将改变这种行为。

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

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

这是一个完整的示例，其中元素着色，因此您可以看到它们彼此相邻：

#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;
}