2017-02-11

CSSでmarginを0にする方法いくつか

はじめに

ウェブサイトの制作でCSSを書いていると、まだまだ初歩的な知識が欠けていると実感することが結構あります。最近では、要素の幅を指定した後、おもむろにその隣に別の要素を並べようとした時、marginで横幅いっぱい埋められていて、どうやってmarginを0にするんだっけ?という事がありました。

ちょっと考えれば思い出すので良いのですが、せっかくなので思いつく範囲で少しまとめてみることにしました。

通常の状態

まず、普通の状態から。連記した二つの要素1(width:50%)と要素2(width:40%)があり、要素のmarginは通常、要素自体の横幅以外は、親要素の幅と同じになるまで全てmarginとなります。親要素の横幅が1000pxだった場合、要素1には50%を指定しているので、500pxが要素1の幅、残り500pxが自動的にmarginとなります。ちなみに本来はborderも含まれますが、今回はborderは見やすくするためのものなので考慮しません。

マージンが横幅を埋めている状態

この状態ではもちろん、横幅いっぱい要素の幅とmarginで埋まってしまっているので、要素2は横に並ぶ事ができません。

marginを0にする

では、すぐに思いつくところから。要素1に「float: left;」を適用します。

floatプロパティでmarginを0にする

marginが0になり、それによって要素2が横に並びました。

次に要素1と要素2の親要素に対して「dislay: flex;」を適用してみます。

flexプロパティでmarginを0にする

こちらもmarginが0になり、要素が横並びになりましが、なぜかHTMLの<br>タグが無視されてしまいました。positonプロパティ的な要素を含んでいるという事なのでしょうか。

次は「display: inline-block;」です。

inline-blockプロパティでmarginを0にする

こちらも横並びになりましたが、妙な隙間が空いてしまいました。少し調べたら、HTMLコードの改行が出力されているせいだそうです。気になる方は、隙間を空けずに連続して要素を記述したり工夫する必要がありそうです。

position: absolute;」も試します。

absoluteプロパティでmarginを0にする

当然ながらmarginは0になりますが、absoluteだけだと要素2が被ってくるので、位置の指定が必要になってきます。

最後に親要素を縮めて要素1のwidthに100%を指定する方法・・・とか考えましたが、子度は親要素のmarginの調整が必要になるだけなのであんまり意味ないかな・・・。

width100%でmarginを0にする

さいごに

色々書いていて思いましたが、上記のCSSプロパティを記述する時、「marginを0にする」という感覚より、「要素を並べる」といった感覚で書いているので、「marginを0にしたい」と思ったときに「要素を並べる」CSSのmarginを0にする性質に、頭の中でマッチングしないため、すぐにmarginを0にする手段が出てこない原因かなぁと思いました。

使うのは簡単ですが、理解するのは難しい・・・。



コメントする(※は必須項目です)













画像認証