Unwanted top margin for h1 element
Question
I am getting an unwanted top margin for an h1 element, not sure why. This is my html:
<body>
<div class="content">
<h1>Header</h1>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
</div>
</body>
This is my css:
body {
background-color: yellow;
padding: 0px;
margin: 0px;
}
h1 {
background-color: lime;
}
.content {
background-color: pink;
position: absolute;
left: 0px;
top: 0px;
padding: 0px;
margin: 0px;
}
the result:
I was expecting the h1 element to be aligned with the top edge of the view.
If I remove the "position", "left" and "top" attributes from the css def, then the h1 element aligns to the top of the view as expected:
why is that happening? I'm using chrome.
Thanks
8 answers
solution1
3 ACCPTED 2014-11-13 22:29:16
You need to add margin:0; :
h1 {
margin:0;
background-color: lime;
}
JSFiddle: http://jsfiddle.net/tb39am7s/
solution2
3 2014-11-13 22:29:28
For every element browser itself sets the default styles. That includes headings, which get some margin at top and bottom - you need to remove them by yourself in case you do not need them.
Unfortunally, those default styles differ from browser to browser, even if W3C gives recommendation , that is why developers try to reset default styles or normalize it before they start adding their own. There is difference between previous two .
solution3
2 2014-11-13 22:29:44
Remove top margin on your h1:
http://jsfiddle.net/austinthedeveloper/wwzxn8gx/
h1 {
background-color: lime;
margin-top: 0;
}
solution4
0 2014-11-13 22:45:51
h1 elements have a default margin. Adding margin: 0; to your h1 properties should clear up your margin issue. I believe that the margin is based on the element that contains it.
solution5
0 2014-11-14 05:52:11
<div class="container">
<h1>HEADER</h1>
</div>
//style
div.container{
padding: 0;
}
h1{
margin-top: 0;
}
Also you coudl use normalize.css to reset the default values of some tags. http://necolas.github.io/normalize.css/
solution6
0 2022-09-07 15:56:08
this happens because of default h1 "line height". you can add line-height property with any desired value like this:
h1{
line-height: 1em;
}
solution7
-1 2014-11-13 22:29:35
如果您使用position: absolute确保在父元素上指定position: relative ，它应相对于（在您的情况下为<body> ），看看是否有帮助。
solution8
-1 2014-11-14 06:06:09
You can do:
h1{
margin:0
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.