Header tag h2, margin bleeding out to other components

Page 1 of 1

1 Replies - 340 Views - Last Post: 17 September 2012 - 11:56 AM

#1 BattlFrog  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 09-April 12

Header tag h2, margin bleeding out to other components

Posted 17 September 2012 - 08:37 AM

I had a situation of the margin for an h2 tag bypassing the element directly above it, so there was a space between div 1 and div 2, instead of div 2 and the h2 tag.

------------------------
| Div 1 |
------------------------
(Unwanted space)
------------------------
| Nav tag (Div 2) |
------------------------
------------------------
| H2 tag |
------------------------

I fixed this by putting the H2 tag inside a floated (left) div. My question is why this occured. I have not been doing this for too long, but I have dealt with headers and divs before, and have not run into anything like this before. Thanks for reading my post.

Is This A Good Question/Topic? 0
  • +

Replies To: Header tag h2, margin bleeding out to other components

#2 BenignDesign  Icon User is offline

  • I cause cancer.
  • member icon




Reputation: 4645
  • View blog
  • Posts: 8,868
  • Joined: 28-September 07

Re: Header tag h2, margin bleeding out to other components

Posted 17 September 2012 - 11:56 AM

Heading tags have a default margins around the heading content, like so:

h1 - 8px
h2 - 10px
h3 - 12px
h4 - 16px
h5 - 20px
h6 - 28px

Note: These margins are top and bottom only. All heading tags have 0 margin left and right.
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1