Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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でテーブルの行間を 広げる方法を書いて …

no image

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

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

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

最新記事

チャーさん

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

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

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