Hapicode

# 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;
2017-03-15
  • css

同じタグを持つ記事をピックアップしました。