Css margin top issue -

i have 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 when add

margin-top:50px; 

to player-thumb

the whole player-holder div goes down 50px.

i want behave add

top:50px; 

to player-thumb (instead of margin-top:50px), want margin.

i dont know how solve this.

thank you.

edit:

actually doesnt quite solve issue, have created new fiddle new elements (playlist @ right , media queries): https://jsfiddle.net/y2yjtnoz/4/

i have applied overflow:auto player-holder (its same overflow:hidden) 'auto' better shows problem. when media queries applied , playlist drops below player, can see playlist doesnt quite clear player player gets scroll, or overflow hidden player gets cut off @ bottom.

just add

overflow:hidden; 

to

.player-holder