html元素外边距问题

xiaoxiao2021-02-28  8

1,并排放两个内联元素时,两元素的外边距为两元素的外边距之和

2,上下放置两个块元素时,两个块元素的快边距会折叠,最后取外边距较大的那个

    如:一个外边距为20,一个为10,最后取20, 两个都是10,则为10.

    要注意的特殊情况,如果一个元素在另一个元素的内部,外边距也会折叠,如果外围的元素有边框则不会,如:

<h1>Startbuzz Coffee's Mission</h1> <div style="margin-top:50px"> <p style="margin-top:30px">To provide all the caffeine that you need to power your life</p> <p>Just drink it</p>

</div>

                

最后与h1的外边距为50,

但如果div有边框,则div与h1的外边距为50,p与div的距离为30,不会折叠

<h1>Startbuzz Coffee's Mission</h1> <div style="margin-top:50px;border:1px solid green"> <p style="margin-top:30px">To provide all the caffeine that you need to power your life</p> <p>Just drink it</p> </div>

               

以上为学习笔记

转载请注明原文地址: https://www.6miu.com/read-1900180.html

最新回复(0)