子要素のパディングは親のサイズを移動しません

Question

次のコードでは、子の<li>は、パディングを15pxに設定して親の<ul>を移動しない理由を理解しようとしています。

body { 
 
    background-color: black; 
 
} 
 

 
.box { 
 
    background-color: white; 
 
    display: inline-block; 
 
} 
 

 
.box__list { 
 
    margin: 0; 
 
    list-style: none; 
 
    padding: 0; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
.box__item { 
 
    color: black; 
 
    display: inline; 
 
    font-size: 14px; 
 
    vertical-align: middle; 
 
    padding: 15px; 
 
}

<div class="box"> 
 
    <ul class="box__list"> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    </ul> 
 
    <ul class="box__list"> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    </ul> 
 
</div>

http://codepen.io/anon/pen/ZKYbYx

取り組んでのみパディングがleftとrightであり、topとbottomが崩壊されます。

ありがとうございます。

Answer 1

list itemsがdisplay:inline;に設定されているため、上/下のパディングに影響を与えるには、display:inline-block;にする必要があります。

body { 
 
    background-color: black; 
 
} 
 

 
.box { 
 
    background-color: white; 
 
    display: inline-block; 
 
} 
 

 
.box__list { 
 
    margin: 0; 
 
    list-style: none; 
 
    padding: 0; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
.box__item { 
 
    color: black; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    vertical-align: middle; 
 
    padding: 15px; 
 
}

<div class="box"> 
 
    <ul class="box__list"> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    </ul> 
 
    <ul class="box__list"> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    <li class="box__item">A</li> 
 
    </ul> 
 
</div>

Answer 2

これは、.box__itemクラスのdisplay: inlineが原因です。 displayをinline-blockに変更すると、問題は解決されます。

インライン要素はマージンとパディングを受け入れますが、ご想像のとおり要素がまだインライン座っ：

インラインを垂直に要素をプッシュしていません。マージンとパディングは、垂直方向ではなく、水平方向にのみ他の要素を押します。

インラインブロックが行う：

ブロックをインラインに設定要素は、それが（「ベースライン」上の）テキストの自然な流れとインラインで設定することでインラインすることは非常に類似しています。違いは、尊重される幅と高さを設定できることです。

display属性hereを正しく使用する方法について読むことができます。