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

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

最新記事

チャーさん

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

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

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