{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《Impact of border property on top margin》','https://www.manongdao.com/q-1217456.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
Problem is your ul tag is not clear
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: hiddento the header.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):
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).