为什么设置display:inline后,padding-bottom仍然起作用?

我将p的display设置为inline后,按理说应该是margin和padding都是上下不起作用,左右起作用,但是为什么padding-bottom仍然起作用?

这是html代码:

<div id="fu">    
    <p>1505</p>
    <p>计科</p>
</div>

这是css代码:

    p{
    display: inline;
    background-color: blue;
    margin: 20px;
    padding: 20px;
    border: 5px solid transparent;
    }
    

图片描述

阅读 1.1k
评论
    2 个回答
    • 2.7k

    其实不是padding-bottom仍然起作用。准确来说是padding-bottom与padding-top都会起作用。只是起作用只是从表现上起作用,但并不占据文档流。什么意思呢,就是表面上p标签被设为了inline,高度被撑开了,但其在文档流中占据的高度并没有包含padding-top和padding-bottom.我将你的代码加了点东西,你可以看看,你可以删除fu上的padding样式,你就会发现其中的奥妙:

        <div class="dfg"></div>
        <div id="fu">
            <p>1505</p>
            <p>计科</p>
        </div>
        <div class="dfg"></div>
        .dfg{height: 20px;background-color: red;}
        #fu{overflow: hidden;background-color: yellowgreen;padding-top: 20px;padding-bottom: 20px;}
        #fu p{
        display: inline;
          background-color: blue;
          margin: 20px;
          padding: 20px;
          border: 5px solid transparent;
        }        
        
      相似问题
      推荐文章