0
<div >
    <h1 style="margin-top:100px">aa</h1>
</div>

有个问题不明白,
1.html里面div包裹一个h1,h1有margin-top, 为什么h1的margin-top会撑破到div外面去,而不是在div里面实现外边距
2.如何实现在div里面谢谢.

代码演示
链接描述

7个回答

1

给div和h1中间隔开就行了 div设置内边距或者边框

1

给div加上透明边框也可以解决这个问题

1

.box:after{

        content: "";
        display: block;
        height: 0;
        clear: both;

    }
    h1{
        float: left;
        background: yellow;
        margin-top:100px
    }
0

根据jasonintju的回答,我整理一下:
因为我的子元素的margin-top比父元素大,所以会直接使用子元素的margin-top

块级父元素与其第一个/最后一个子元素
如果块级父元素中,不存在上边框、上内补、inline content、 清除浮动 这四条属性(对于上边框和上内补,也可以说,当上边距及上内补宽度为0时),那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象,换句话说,此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的,若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height、min-height、 max-height 分隔时,就会发生 下外边距合并 现象。

引用:https://developer.mozilla.org...

0

可以给div设置一个 padding:1px

0

可以给div设置overflow:hidden.或者是给div设置border,这样就可以了

撰写答案

相似问题