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

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

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>

Answer 2

我建议使用flexbox，它在所有现代浏览器中都受支持，只有依靠IE10以上的浏览器才需要浮动左边的sollution 因此，相关的变化是：

#play-area-overlay {
  display: flex;
  height: 100%;
}

#textbox, #visualizer {
  height: 100%;
  width: 50%;
}

这是你的代码片段，显示flex变化以及两个容器的着色：

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 {
  display: flex;
  height: 100%;
}
#textbox,
#visualizer {
  height: 100%;
  width: 50%;
}
#textbox {
  background: cornflowerblue;
}
#visualizer {
  background: indianred;
}
#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>

Answer 3

试试这个..！

#textbox h2 {
height: 100%;
width: 50%;
margin: 0px;
}

无法摆脱保证金，已将保证金设定为0

3 个答案: