inline 元素的越界行为

inline 元素的越界行为

设置为 inline 的元素会忽略任何 width、height、margin-top 和 margin-bottom 设置,但是margin-left、margin-right 和 padding 依然有效

正常显示

margin-left、margin-right 和 padding-left、padding-right 正常显示

越界行为

设置 display: inline 的元素接受 padding 的设置,padding-top 和 padding-bottom 会越界进入相邻元素的区域,而不是局限于元素本身的空间

  • 不设置 padding-top 和 padding-bottom 的情况下

    	.a {
                display: block;
                background-color: red;
            }
    
            .b {
                display: inline;
                background-color: green;
            }
    
            .c {
                display: block;
                background-color: blue;
            }
    
    		<div class="a">block</div>
            <div class="b">inline</div>
            <div class="c">block</div>
    

1554030858883

  • 设置 padding-top 和 padding-bottom 的情况后

    	.b {
                display: inline;
                background-color: green;
                padding-top: 10px;
                padding-bottom: 10px;
            }
    

    1554030963228

可以明显看到 .b 的 inline 元素的上下内容都侵入了相邻的元素当中

# ARTS 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×