首页 > padding和margin的问题

padding和margin的问题

为什么给small设置margin没有效果而父元素却发生了向下移动
还有给small设置padding-left完全没用。这是之前从来没遇到过得求解答
还有一个问题子元素padding-left-right 父元素也要相对调整宽度
那么如果子元素padding-top 父元素用不用调整高度呢?

!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0 ;padding:0}
        .big{width:960px;height:50px;background: yellow;margin:0 auto;}
        .small{width:900px;height:30px;background: red;margin: 10px auto}
        
        </style>
    </head>
    <body>
        <div class="big">
            <div class="small"></div>
        </div>
    </body>
</html>

.small{
    display:inline-block;
    }

补充下回答1:出现这种情况是因为发生外边距合并,所以其父元素却发生了向下移动,以下是关于外边距的解释,
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

题主可以看下关于margin特性的详细解释
http://www.poluoluo.com/jzxy/...


外边距合并情况的一种,两个div的上外边距之间没有什么隔开,于是会发生合并,取大的那个,于是父元素下来了

另外padding-left有效果的啊,不知题主想表达什么,图中蓝色框出来的就是效果啊

【热门文章】
【热门文章】