Impact of border property on top margin

前端未结

关注

 3  451

失恋的感觉

Refer to the following code:

相关标签:

3条回答

太阳男子

2020-12-20 04:01
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).
0 讨论(0)
发布评论:

提交评论
- 加载中...
陌清茗

2020-12-20 04:14
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉话见心

2020-12-20 04:14

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>

0 讨论(0)

热议问题