Css margin top issue

Question

I have this layout:

<div id="wrapper">
  <div class="player-wrapper">
    <div class="player-holder">
      <div class="player-thumb"></div>
    </div>
  </div>
</div>

https://jsfiddle.net/y2yjtnoz/1/

The problem is when I add

margin-top:50px;

to player-thumb

the whole player-holder div goes down 50px.

I want it to behave like I add

top:50px;

to player-thumb (instead of margin-top:50px), but I want to do it with margin.

I really dont know how to solve this.

Thank you.

EDIT:

Actually this doesnt quite solve the issue, I have created new fiddle with some new elements (playlist at right and some media queries): https://jsfiddle.net/y2yjtnoz/4/

I have applied overflow:auto to player-holder (its the same with overflow:hidden) but 'auto' better shows the problem. Now when media queries are applied and playlist drops below player, you can see playlist doesnt quite clear the player so player gets scroll, or with overflow hidden player gets cut off slightly at the bottom.

Answer 1

Append overflow:auto to .player-holder

Source (Collapsing margins)

Answer 2

只需添加

overflow:hidden;

到

.player-holder 

Answer 3

从#wrapper

中删除位置：亲戚