What I Learned Today – CSS Padding vs Margin
By Tom. Filed in Uncategorized |
I’ve been working through the design course at Hack Design. I’m about a month behind and decided to try to catch up a bit. I’m currently working through the whitespace lesson and stumbled across the answer to a vexing issue I’d noticed in some of the websites I’ve been working on. I’m a relative novice when it comes to CSS and so many of you out there may have already known the answer but it was news to me.
In this article on Scale & Rhythm, Iain Lamb talks about how he adds vertical space between the text and heading blocks on a page. In the article he points out that he adds padding to get the spacing desired. He then goes on to say:
At this point, you might be asking: “Why set subhead padding rather than margin?” The answer: vertical margin collapses between two block elements.
That little bit right there stuck with me. I had never known that and had never come across that little tidbit in my reading about CSS margins and padding. I had run into this problem of the vertical space collapsing and had never been able to figure out why. Now I know.
And just so I wouldn’t forget, I jumped over here and recorded it so I could find it later. Now I need to go back and finish the article.