强制保证金空间？

Question

在此HTML代码中;我已经删除了所有边距，但是页脚上方有4px的窗框。我不知道它来自哪里？ 这是带样式的HTML

＆＃13;

＆＃13;

	* {
	  margin: 0;
	  padding: 0;
	}
	body {
	  width: 900px;
	  background-color: yellow;
	  margin: 0px auto;
	  padding: 0;
	}
	header {
	  width: 900px;
	  margin: 0 auto;
	  height: 80px;
	  background-color: brown;
	}
	nav {
	  width: 900px;
	  height: 50px;
	  background-color: black;
	  margin: 0 auto;
	}
	section {
	  width: 650px;
	  height: 850px;
	  background-color: darkgray;
	  float: left;
	  margin: 0 auto;
	}
	aside {
	  width: 250px;
	  height: 850px;
	  background-color: #6B6862;
	  display: inline-block;
	  margin: 0px auto;
	}
	footer {
	  margin: 0px;
	  width: 900px;
	  height: 50px;
	  background-color: black;
	}
	.by {
	  color: white;
	  text-align: center;
	}
	

＆＃13;

<header>
</header>
<nav>
</nav>

<section>
</section>
<aside>
</aside>
<footer>
  <div class="by">
    Author
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

如何垂直集中这个词＆＃34;作者＆＃34;在页脚中。

Answer 1

在align元素上设置vertical-align属性。由于您将显示设置为内联块，因此还有剩余空间用于下载内容。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  width: 900px;
  background-color: yellow;
  margin: 0px auto;
  padding: 0;
}
header {
  width: 900px;
  margin: 0 auto;
  height: 80px;
  background-color: brown;
}
nav {
  width: 900px;
  height: 50px;
  background-color: black;
  margin: 0 auto;
}
section {
  width: 650px;
  height: 850px;
  background-color: darkgray;
  float: left;
  margin: 0 auto;
}
aside {
  width: 250px;
  height: 850px;
  background-color: #6B6862;
  display: inline-block;
  margin: 0px auto;
  vertical-align:top;
}
footer {
  margin: 0px;
  width: 900px;
  height: 50px;
  background-color: black;
}
.by {
  color: white;
  text-align: center;
}

＆＃13;

<header>
</header>
<nav>
</nav>

<section>
</section>
<aside>
</aside>
<footer>
  <div class="by">
    Author
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.by作者文本可能会导致保证金崩溃错误。

尝试将此css添加到.by：

.by {
    margin: 0 auto;
}

Answer 3

垂直居中对齐文字：

   footer
    {
     width:900px;
     height:50px;
     background-color:black;
    display: table;
     position: relative;
     }
    .by
    {
     color:white;
      text-align:center;
     display: table-cell;
     vertical-align:middle;
     }


   And for space issue this could fix :
   aside
  {
   width:250px;
    height:850px;
    background-color:#6B6862;
    display:block;
    margin:0 auto;
    clear:right;
    }