在不影响样式的情况下消除间隙

Question

所以在上一篇文章中我问过如何删除间隙，以便身体占据浏览器窗口的整个高度。这是通过以下方式解决的：

margin: 0;

但是，我需要（或者我知道的唯一方法）使用边距来设置文本样式。只要我申请

之类的东西

margin-top: 50px;

身体不适合浏览器的100％高度。我知道div的所有内容都必须使用margin 0才能正常工作，但是我应该如何使用margin来设置内容。

还有其他方法可以让身体100％达到浏览器高度吗？

https://jsfiddle.net/fveb8wsu/

Answer 1

body{
  margin:0;
  padding:0;
}  

对我而言，body有一些默认填充。因此，由于中间的内容为100vh +填充，因此大于100vh

Answer 2

这就是你需要的吗？的 DEMO

＆＃13;

＆＃13;

#content-mid {
  background-color: #000000;
  opacity: 0.9;
  height: 100vh;
  width: 750px;
  margin-left: 200px;
}
#basics {
  display: table;
  margin: 0 auto;
  height: 400px;
  width: 725px;
}
/* Content Text */

#sv_title {
  font-family: BebasNeue;
  font-size: 60px;
  color: #FFFFFF;
  text-align: center;
  margin-top: 50px;
}
#sv_sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 25px;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  margin-top: -20px;
}

＆＃13;

<div id="content-mid">

  <div id="basics">
    <div id="sv_title">Community Name</div>
    <div id="sv_sub">Your sub title here!</div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我同意所有人的意见，而不是保证金使用填充，请看一下：

#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics { 
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}

https://jsfiddle.net/keinchy/5up22vom/1/

-cheers

Answer 4

您在此处的内容是父元素之间的collapsing margins，因为父级没有margin-top而小孩有margin-top: 50px Demo

所以现在父元素有height: 100vh和margin-top: 50px，这就是为什么body不适合浏览器的100％高度。

如何防止折叠边距有几种选择

• 使用display: inline-block Demo
• 使用display: flex Demo
• 使用float: left Demo

或者如果你想保留父母的保证金，但你不希望身高超过窗户高度，你可以使用calc(100vh - marginofchildren)这样Demo