What are the default margins for the html heading tags (

,

,

, etc.)?

后端 未结 4 1208
盖世英雄少女心
盖世英雄少女心 2020-11-22 13:17

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

相关标签:
4条回答
  • 2020-11-22 14:13

    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 }
    
    0 讨论(0)
  • 2020-11-22 14:16

    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;} 
    
    0 讨论(0)
  • 2020-11-22 14:18

    Your Question:

    It varies between browsers. Check each browser's specific default stylesheets to tell.

    For Google Chrome for example, it's 0.67em.


    A Better Solution?

    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.

    0 讨论(0)
  • 2020-11-22 14:19

    I think you should set line-height:100% for h1,h2,h3,h4,h5,h6 tag. So blank line will be shortest.

    0 讨论(0)
提交回复
热议问题