I avoid using the defaults with the reset code below:
margin:0px; and padding:0px;
For example, what are the default margins for the headin
The CSS specification has an informative Appendix D. Default style sheet for HTML 4.
Although it is informative it still says:
Developers are encouraged to use it as a default style sheet in their implementations.
There you can find
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
It's different regarding which browser, thus if you want a pixel-perfect design then practice is to "reset" those values to 0 (margin and padding) and set them yourself.
"CSS reset" is very common to front-end developers, a simple example of one i use :
html,body,blockquote,code,h1,h2,h3,h4,h5,h6,p,pre{margin:0;padding:0}
button,fieldset,form,input,legend,textarea,select{margin:0;padding:0}
fieldset{border:0}
a,a *{cursor:pointer}
div{margin:0;padding:0;background-color:transparent;text-align:left}
hr,img{border:0}
applet,iframe,object{border:0;margin:0;padding:0}
button,input[type=button],input[type=image],input[type=reset],input[type=submit],label{cursor:pointer;}
ul,li{list-style:none;margin:0;padding:0;}
strong{font-weight:bold;}
em{font-style:italic;}
It varies between browsers. Check each browser's specific default stylesheets to tell.
For Google Chrome for example, it's 0.67em
.
Do know that if you wish to aim for x-browser consistency, you'll have to use a CSS Reset.
The most common one being:
* { padding: 0; margin: 0; }
Although other (and probably better) exist.
I think you should set line-height:100%
for h1,h2,h3,h4,h5,h6
tag. So blank line will be shortest.