# 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 5年前

css

関連記事

Tailwindcss でローディングコンポーネント作成

Tailwind css使って next.jsのグローバルローディングをカスタマイズする話...

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

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

Nuxt Fontawesome アイコン使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

sass-loader エラー

sassエラー対応とsassをオンラインにcssに変換するツール...

CSS background と conic-gradient で bookmark のブックマーク作る

画像使わずにcssブックマークをスタイルシートのbackgroundとconic-gradientで...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

html5 新タグ要素と廃止タグ要素

2008年に発表されたHTML5の規則をもとに、新しいタグ要素と機能及び廃止する機能タグなどをまとめ...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

google color palette

google color paletteが用意してくれているから、センスなくてもきれいに配色できる...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

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

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

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

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