css中子元素设定margin

2021-03-17 07:42 jianzhan

本文详细介绍了css中子元素设定margin-top为何危害了父元素,共享给大伙儿,实际以下:


<style type="text/css"> 
    *{
        margin: 0px; padding: 0px; 
    }
    .show{
        margin: 0px auto;
        width: 200px;
        height: 100px;
        background-color: #999999;
    }
    .show h2{
        margin-top: 50px;
        cursor: pointer;
    }
</style>

<body>
    <div class="show">
       <h2>crystal</h2>
    </div>
</body>

两个div,子元素div设定了margin-top后,发现并沒有跟想像的1样,而发现父元素造成了间隔。

如上图。

基本原理:margin折叠

在css2.1盒实体模型仲要求的內容

由于嵌套循环也属于紧邻,因此在款式表格中优先选择级更高子元素的margin会遮盖外层父元素界定的margin。

父元素的第1个子元素的上边距margin-top假如碰不到合理的border或padding.就会持续1层1层的找自身 “领导”(父元素,先祖元素)的不便。要是给领导设定个合理的 border或padding便可以合理的管制这个目无领导的margin避免它越级,假传诏书,把自身的margin当领导的margin实行。

处理方法:

1、父元素或子元素应用波动或肯定精准定位。
2、父级设定overflow:hidden
3、父级设定padding(破坏非空白的折叠标准)
4、父级设定border

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。