Html 尽管页边距底部工作，但页边距顶部不工作

我试图给h1的“照片”页边距顶部，所以它不是那么接近标题。出于某种原因，它会将其放在页眉上，但当我给页眉底部留边距时，效果很好

jsfiddle-

---

尝试给出一个

溢出：隐藏到父级，因为边距被折叠

#包装器{
宽度：960px；
保证金：0自动；
溢出：隐藏；
}

小提琴：

<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;
}