鍍金池/ 問答/HTML/ 為什么設(shè)置display:inline后，padding-bottom仍然起作用

為什么設(shè)置display:inline后，padding-bottom仍然起作用？

我將p的display設(shè)置為inline后，按理說應(yīng)該是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;
    }

圖片描述

回答
編輯回答
薔薇花

上下不起作用，左右還是有作用的

2018年2月25日 01:37
編輯回答
孤影

其實不是padding-bottom仍然起作用。準(zhǔn)確來說是padding-bottom與padding-top都會起作用。只是起作用只是從表現(xiàn)上起作用，但并不占據(jù)文檔流。什么意思呢，就是表面上p標(biāo)簽被設(shè)為了inline，高度被撐開了，但其在文檔流中占據(jù)的高度并沒有包含padding-top和padding-bottom.我將你的代碼加了點(diǎn)東西，你可以看看，你可以刪除fu上的padding樣式，你就會發(fā)現(xiàn)其中的奧妙：

    <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;
    }
2018年5月28日 17:38