可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Refer to the following code:

body {
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray;
}
.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  /* border: solid 1px black; */
}

<div class="header">
  <ul>
    <li><a href="index.html">Dashboard</a></li>
  </ul>
</div>

When I remove border: solid 1px black from .header I get some space above div element. But when I add the border property I get the perfect results (that is space removed). What should be impact of border property on this space?

回答1:

This is due to margin collapsing (MDN, W3.org).

In your example the header element contains an unordered list which, by default, has a top and bottom margin. Because of border collapsing, its margin is transferred to the header which in turn is transferred to the body. As a result, the body is pushed down while the header and list aligns with the top of body.

Adding a border is one method to prevent margin collapsing (see W3 specs). If you want to avoid adding a border, use the other methods such as assign overflow: hidden to the header.

body {
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray;
}
.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  /*border: solid 1px black;  */
  overflow: hidden;
}

<div class="header">
  <ul>
    <li><a href="index.html">Dashboard</a></li>
  </ul>
</div>

回答2:

Problem is your ul tag is not clear

body{
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;  
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray; 
}

.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto; 

  background-color: yellow; 
  /*border: solid 1px black;*/  
}
ul{float: left;}

<!DOCTYPE html> 
<html>
  <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div class="header">
      <ul>
    <li><a href="index.html">Dashboard</a></li>
      </ul>
    </div>
  </body>
</html>

回答3:

Borders should not affect margins (edit: except here because of margin collapsing, see @salman-a's answer. My bad. But you should still use a CSS reset).

I think you need some sort of CSS reset

One I find usefull for quick testing is the simplest of all (but not recommended to use in other cases, beacause it is way to simple):

*{padding:0;margin:0}

This will clear all browser padding/margin.

I think the problem here is you did not reset your header and ul margins, and the browser adds them (browser do that in order to display stuff nicely, even if there is no CSS).