html - 尽管 margin-bottom 工作，但 margin-top 不工作

Question

我试图给 h1“照片”留出边距，这样它就不会太靠近标题。它出于某种原因将它提供给标题，但当我提供 margin-bottom 时它工作正常。

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;，因为 margin 被折叠了。

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

fiddle :https://jsfiddle.net/a92085k0/1/