Today, I found a interesting difference between padding and margin when I’m working on Metrics 2.0 Introduction page. There are several
VideoThumbnail widget on the page, which contains a video snapshot and a paragraph text description.
Here is the Html DOM of the widget, written in Haml:
Since the description could be very short or very long, so I make the div that contains the description scrollable, so I wrote the following stylesheet for caption div:
The style looks fine, and here is how it looks:
But very soon, I found the widget with scrollbar is taller than the one without it, it is because padding on 2 elements next to each other will not be merged: Red rect in following snapshot
It is caused because padding will not merged together as margin does, To solve the issue, I changed the padding to margin in the stylesheet:
But bottom margin is corrected, but I found the scrollbar begin to occupy the space of content, which is not good! The center widget uses padding(Blue) and the right one uses margin(Red)
And I remember if I uses padding, the scrollbar takes the space of right padding; but if I use margin, it takes the space of the content. So I update the stylesheet in this way:
I use padding on the right but uses margin on other side, so vertical scrollbar will take the right padding when necessary. It is a very interesting CSS trick, and it works fine under webkit based browser.