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

関連記事

iphone 対応の背景画像フルースクリーン表示

css background image 100% coverがiphoneに効かない対応しました。...

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...