# margin 上下効かない原因
css の margin 使って左右は効くけど、上下効かないことがありました。
# 失敗例
li {
display: inline;
padding: 5px 10px;
margin: 10px;
color: #fff;
background-color: #ccc;
}
<ul>
<li>sample1</li>
<li>sample2</li>
</ul>
# 修正後
li {
display: inline-block;
padding: 5px 10px;
margin: 10px;
color: #fff;
background-color: #ccc;
}
<ul>
<li>sample1</li>
<li>sample2</li>
</ul>
# 結論
Point はinline-blockにあります。
display: のブロック化忘れてはいけない
マージンが効かない大概の原因は div や display:block のミスのような気がします。
top および bottom のマージンは、 <span> または <code> などの置換要素ではないインライン要素には効果がありません。
# margin について
margin は古くからある CSS のスタイルで IE ８でも対応しています。最近のブラウザーだと中央寄せはdisplay:flex;justify-contentでもいけますが、やはり古いブラウザも対応したければ、真面目にmargin: 0 auto;やった方がいいかもしれません。
CSS: カスケーディングスタイルシート margin (opens new window)
# 構文
/* 四辺すべてに適用 */
margin: 1em;
margin: -3px;
/* 上下 | 左右 */
margin: 5% auto;
/* 上 | 左右 | 下 */
margin: 1em auto 2em;
/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 auto;
/* グローバル値 */
margin: inherit;
margin: initial;
margin: unset;