javascript - 子元素设置margin-top为什么会作用在父元素上？

问题描述

问 题

如图，为什么我给p标签元素设置的margin-top会作用在div上面？

<div class="test">
    <p class="para">this is a para</p>
</div>

* {
    padding: 0;
    margin: 0;
}
.test {
    position: relative;
    height: 400px;
    width: 1000px;
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #DCF1B8;
}
.para {
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    background-color: #734E4E;
    height: 50%;
    margin-top: 100px;
    margin-bottom: 100px;
}

解决方案

CSS外边距合并

http://www.w3school.com.cn/css/css_margin_collapsing.asp

这篇关于javascript - 子元素设置margin-top为什么会作用在父元素上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！