儘管保證金底部工作，margin-top仍不能工作

Question

我想給h1「照片」保證金頂部，所以它不是那麼接近標題。它給它的標題出於某種原因，但當我給保證金底部它工作正常。

的jsfiddle - https://jsfiddle.net/a92085k0/

<div id="wrapper"> 

<section class="photo-section"> 
    <h1 class="photo-title">Photos</h1> 

    <div id="photo-wrapper"> 
     <div id="gallery"> 
      <img id="largeImage" height="300" width="590" src="images/city-landmark-lights-night.jpg" alt=""> 
      <ul id="thumbs"> 
       <li><a href="images/black-and-white-city-skyline-buildings.jpg"><img src="images/black-and-white-city-skyline-buildings.jpg" width="250" height="150"></a></li> 
       <li><a href="images/city-road.jpg"><img src="images/city-road.jpg"></a></li> 
       <li><a href="images/skyline-buildings-new-york-skyscrapers.jpg"><img src="images/skyline-buildings-new-york-skyscrapers.jpg"></a></li> 
       <li><a href="images/city-landmark-lights-night-small.jpg"><img src="images/city-landmark-lights-night-small.jpg"></a></li> 

      </ul> 
     </div> 
    </div> 


    <script type="text/javascript" src="https://ajax.google.apis.com/ajax/libs/jquery/1.6/jquery.min.js">          </script> 
    <script type="text/javascript" src="main.js"></script> 
</section> 

.photo-title{ 
    font-size:30px; 
    font-family:helvetica; 
    color:#158ec5; 
    background:red; 
    margin-bottom:20px; 
} 

Answer 1

先給一個overflow: hidden;父，因爲利潤率被倒塌。

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

小提琴：https://jsfiddle.net/a92085k0/1/