css HTML

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

投稿日:

Pocket

 

うもチャーさんです。

 

あなたはインライン要素にmarginの上下を、

効かせたいのに効かなくて困ってませんか?

 

この記事では、そんな状態の解決方法を、

書いています。

 

 

なのであなたがこの記事を読めば、margin上下を、

効かせることができるようになります。

 

そのため、インライン要素でmargin上下が、

効かないと悩んでいるならこのまま下に、

スクロールして読んでみてください。

 

 

スポンサードサーチ

インライン要素でmargin上下が効かない場合はこうしましょう。

 

で、結論から言いまして、

 

インライン要素でmarginの上下を効かせたい場合は、

display:inline-block;か、display:block;

を適用させる必要があります。

 

論より証拠といきまして、

早速実験してみましょう。

 

 

ということでまずインライン要素として、

aタグで囲ったテストという文字を、

表示させてます。

 

わかりやすくborderで囲ってます。

 

 

で、ここにmarginの上下を設定します。

 

インライン要素 margin2

 

はい、marginの上下が効いてないですね。

 

こんな風にインライン要素には、

marginの上下は指定しても効きません。

 

 

ですが、ここに、

display:inine-blockまたはdisplay:blockを、

指定して要素を変えてやると、、

 

display:inline-blockの場合

 

インライン要素 margin3

 

display:blockの場合

 

インライン要素 margin4

 

はい、このようにmarginの上下が効いて、

上にスペースが取れましたね。

 

というように、aタグのような、

インライン要素にmargin上下を効かせたい。

 

そんな場合は、displayでblockか、

inline-blockに変えてやるといいです。

 

 

とはいえ、注意点として、

inline-blockとblockではみてわかる通り、

要素が幅いっぱいまで広がるかという違いがあります。

 

なので、グローバルメニューのような、

リンクとして並べる場合は、inline-blockを、

選ぶと良いでしょう。

 

 

スポンサードサーチ

インライン要素のmargin左右は?

 

また別の話としてmarginの左右ですが、

こちらはインライン要素のままでも、

普通に効きます。

 

なので、特に問題を感じることはないでしょう。

 

 

スポンサードサーチ

まとめ

 

インライン要素のmarginの上下が効かないですが、

その解決策としては、display:inline-blockか、

display:blockを指定してインライン要素じゃなくしましょう。

 

そうすればmarginの上下を効かせることができます。

 

 

ということで、あなた自身でも、

今から早速試してみましょう。

 

実際にあなた自身で手を動かして、目で挙動をみることで、

しっかりと記憶され、あなたのスキルになっていくので、

ぜひやってみてください。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-css, HTML


スポンサードサーチ

関連記事

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。