老师,是只有块级元素才会纵向重叠吗?内联元素可以重叠吗?

老师,是只有块级元素才会纵向重叠吗?内联元素可以重叠吗?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
       
        div {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
       
        span,
        a,
        button {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p>BBB</p>
    <!-- 第一个p与最后一个p之间的距离是15px -->

    <div>AAA</div>
    <div></div>
    <div></div>
    <div>BBB</div>
    <!-- 第一个div与最后一个div之间的距离是15px -->

    <!-- margin-top 和 margin-bottom 会重叠,空白内容的块级标签也会重叠 -->

    <span>AAA</span>
    <span></span>
    <span></span>
    <span>BBB</span>

    <button>AAA</button>
    <button></button>
    <button></button>
    <button>BBB</button>

    <a href="">AAA</a>
    <a href=""></a>
    <a href=""></a>
    <a href="">BBB</a>
</body>

</html>

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2021-12-15 16:04:00

同学你好,解答如下:

1、块元素上下间距重叠,会取最大值。如果块元素浮动了,那么间距不会重叠,是累加的。

2、inline内联元素span和a,设置margin-top和margin-bottom并不会生效,margin-left和margin-right是生效的,但是不会重叠

https://img1.sycdn.imooc.com//climg/61b9a09109f41f3209490482.jpg

3、inline-block行内块元素,上下左右间距是不会重叠的

https://img1.sycdn.imooc.com//climg/61b9a14e09d6dc2901940099.jpg

https://img1.sycdn.imooc.com//climg/61b9a15c09037a4e01700148.jpg

自己可以再测试下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师