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 就会消除

posted @ 2018-03-07 08:51  ITBoy-Men  阅读(179)  评论(0编辑  收藏  举报