margin取百分值

當margin的值爲百分值時，與其父元素的寬度有關：

<style type="text/css">
    *{
        padding: 0;
        margin:0;
    }
    .parent{
        height:200px;
        width:500px;
        margin:0 auto;
        background-color: red;
    }
    .parent div{
        margin:10%;
        background-color: green
    }
</style>

<div class="parent">
    <div>HTML</div>
</div>

 

你會發現，父元素距離上面也有50px，將父元素設置overflow:hidden 就會消除