SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin confusion

    So W3C states that the h1 element has default margins as followed:

    HTML Code:
    h1 {
    display: block;
    font-size: 2em;
    margin-before: 0.67em;
    margin-after: 0.67em;
    margin-start: 0;
    margin-end: 0;
    font-weight: bold; }
    But when clear all default margins using the following code, my h1 tag still renders margins before and after. Why is this when all other elements have no margins under my css rule?

    HTML Code:
    * {
    margin: 0;
    padding 0:
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The default margins are supplied by browsers, and that rule you showed will definitely remove all margins. If you are talking about the slight space that remains above and below the element, you are probably dealing with line-height, which you can fiddle with if you need to.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    first off:
    Code:
    h1 {
    display: block;
    font-size: 2em;
    margin-before: 0.67em;
    margin-after: 0.67em;
    margin-start: 0;
    margin-end: 0;
    font-weight: bold; }
    is not valid, it should be
    Code:
    h1 {
    display: block;
    font-size: 2em;
    
    margin-left: 0.67em;
    margin-right: 0.67em;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold; }
    as ralph said, you may be referring to the few pixels of space ( which are there to accommodate the ascenders and descenders of any font). but you could ad line-height:1; to mitigate this. We are also assuming your text is not centered ( in which case it may appear as if there is left/right margin, since H1 tags are BLOCK elements and as such extend 100% of the width of the container.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Brandon Dorsey View Post
    HTML Code:
    * {
    margin: 0;
    padding 0:
    }
    There's also the possibility that this was copied from your real code in which case the punctuation is wrong. Try this:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    NICE catch, RP! I should have spotter that typo as well.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    first off:
    Code:
    h1 {
    display: block;
    font-size: 2em;
    margin-before: 0.67em;
    margin-after: 0.67em;
    margin-start: 0;
    margin-end: 0;
    font-weight: bold; }
    is not valid, it should be
    Code:
    h1 {
    display: block;
    font-size: 2em;
    
    margin-left: 0.67em;
    margin-right: 0.67em;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold; }
    as ralph said, you may be referring to the few pixels of space ( which are there to accommodate the ascenders and descenders of any font). but you could ad line-height:1; to mitigate this. We are also assuming your text is not centered ( in which case it may appear as if there is left/right margin, since H1 tags are BLOCK elements and as such extend 100% of the width of the container.
    The orignal code was taken from http://www.w3.org/TR/html-markup/h1.html. I know it is not valid, but when using an inspector or firebug, it shows those declarations. Also, it seems that when using those tools that the line-height and margins are highlighted using the same colors. That is where I was confused.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Brandon Dorsey View Post
    when using an inspector or firebug, it shows those declarations.
    Yes, that's how some browsers apply defaults. We have to stick with the standard declarations, though.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •