Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Different behavior of heading tag with section

    • 0
    • 0
    • 0
    • 2
    • 0
    • 0
    • 0
    • 852
    Answer it

    If I'm write Heading tag (h1 and h2) in section or aside it shows same font size and if I put this outside of section or aside tag it works normal. Why?

    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    
    
    <section>
        <h1>heading 1</h1>
        <h2>heading 2</h2>
        <h3>heading 3</h3>
    </section>
    
    <aside>
        <h1>heading 1</h1>
        <h2>heading 2</h2>
        <h3>heading 3</h3>
    </aside>
    

 2 Answer(s)

  • This is an browser custom styles) Eg. h1 outside of section or aside have font-size: 2em, but in section, article, aside, nav have font-size: 1.5em See in devtools.

    :-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; } Outside of article, section, nav, aside h1 have this styles

    h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } If you don't want such surprises - reset browser styles with normalize.css

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: