Question

请参阅以下代码：

 [Elastica\Exception\ResponseException]                                                                                                                                  
  MapperParsingException[mapping [soccer]]; nested: IllegalArgumentException[Invalid format: [Y-m-d H:i:s]: Illegal pattern component: i]; nested: IllegalArgumentExcept  
  ion[Illegal pattern component: i];

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

当我从.header中删除<div class="header"> <ul> <li><a href="index.html">Dashboard</a></li> </ul> </div>时，我会在div元素上方获得一些空格。但是当我添加border属性时，我得到了完美的结果（即删除了空格）。边境财产对这个空间有什么影响？

Answer 1

这是由于保证金崩溃（MDN，W3.org）。

在您的示例中，header元素包含一个无序列表，默认情况下，该列表具有顶部和底部边距。由于边界折叠，其边缘被转移到标题，而标题又转移到身体。结果，当标题和列表与正文顶部对齐时，按下正文。

top: margin of ul, bottom: margin of body

添加边框是防止边距折叠的一种方法（请参阅W3规范）。如果要避免添加边框，请使用其他方法，例如将overflow: hidden指定给标题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题是你的ul标签不清楚

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>

Answer 3

边框不应该影响边距（编辑：除了这里因为边距折叠，请参阅@ salman-a＆＃39答案。我的不好。但你仍然应该使用CSS重置。）

我认为您需要某种CSS reset

我觉得有用的快速测试是最简单的（但不建议在其他情况下使用，因为它是简单的方法）：

*{padding:0;margin:0}

这将清除所有浏览器填充/边距。

我认为这里的问题是你没有重置你的标题和ul边距，浏览器会添加它们（浏览器这样做是为了很好地显示内容，即使没有CSS）。

边境财产对最高边际的影响

3 个答案: