thichtomo Posted June 28, 2014 Share Posted June 28, 2014 I have a piece of code like following: body { margin:0px; font-family:"Segoe UI",Tahoma,Verdana; font-size:14px; background-color:#E3E3E3;}h1 { background-color:#9dc45f;} <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles/styles.css"/> </head> <body> <div id="header"> <h1>Tag h1 is displayed differently in Chrome and Firefox. Please, tell me why? </h1> </div> </body></html> In Chrome, there is no margin between <h1> and top boundary of browser (as expected). But in Firefox, there is still a distance, approximately 19px, between them. I don't find out the reason of this issue. Please, tell me why! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 28, 2014 Share Posted June 28, 2014 Different browser have different default margins for elements, the margin in body will only affect the body element nothing else. so chrome might have no margin at top of h1 element, while firefox might have a approx margin 19px at top, and maybe at bottom, that is why it it good practice to zero all element with * {margin: 0; and padding:} at very top of css file, and reset them to requirement for example *{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}p{margin:1em 25px;}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {font-size:2em;}h2 {font-size:1.84em;}h3 {font-size:1.68em;}h4{font-size:1.52em;}h5 {font-size:1.36em;}h6 {font-size:1.20em;} 2 Link to comment Share on other sites More sharing options...
newseed Posted June 28, 2014 Share Posted June 28, 2014 Set your h1 margins and padding to 0. Then adjust to suit and it will display accordingly for all browsers. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now