CSS trick: Place Scrollbar outside of the client area

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:

VideoThumbnail Widget Html

%li.span4
  %a.thumbnail.new(data-widget="IntroductionPage.VideoThumbnail")
    .snapshot-container
      %img.snapshot{ src: snapshot }
      %img.status(src="/assets/new.png" )
    .caption
      .title
        %h3 #{index}. #{title}
      %p.description #{description}

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:

VideoThumbnail Widget Stylesheet

.caption {
  padding: 9px;
  height: 150px;
  overflow-y: auto;
}

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:

VideoThumbnail Widget Stylesheet

.caption {
  padding: 0;
  margin: 9px;
  height: 150px;
  overflow-y: auto;
}

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:

VideoThumbnail Widget Stylesheet

.caption {
  padding: 0 9px 0 0;
  margin: 9px 0 9px 9px;
  height: 150px;
  overflow-y: auto;
}

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.