无法去除页面边距，已将边距设置为0

Question

无法去除页面边距，已将边距设置为0

4

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

- kshatriiya

你有考虑到h2元素会自带默认的边距或内边距吗？可能是这个原因。我没有检查这个示例。 - Kai Qing

你的文本框h2有一个边距。 - David

你可能没有看到边距，但是通过将div的宽度设置为50%而创建的空间。 - David Dylan

我刚刚在Chrome的检查工具中查看了一下，如果将宽度更改为100％，则看起来很好。因此，我的猜测是该工具欺骗性地使用相同的颜色来表示空白间隙和实际边距。 - David Dylan

你好，h4位于导航栏中，在我看来不会干扰下面分别在容器div中的两个div元素。我想把"文本框"和"可视化器" div并排放在flexbox容器中。但是边距会阻止我这样做。如果我从两个div中移除宽度，则这些div的默认宽度将恢复到100%。如果我定义一个固定数字或百分比的宽度，则会给我带来边距。 - kshatriiya

显示剩余5条评论

3个回答

1

我建议使用Flexbox，它被所有现代浏览器支持。只有当你需要兼容IE10之前的浏览器时，才需要使用float left。

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

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

这是您的代码片段，使用了display 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>

- Kalle

谢谢，我确实使用了flexbox来布局我的导航栏。我本以为我也将我的“play-area-overlay”设置为flex，但实际上并没有。这是我犯的一个相当尴尬的错误。现在一切都运行良好。 - kshatriiya

0

试试这个..！

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

- Lakshman Kambam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon Uleis · Accepted Answer

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

添加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>