【公開日】 2017年05月16日  【最終更新】 2017年05月30日

margin-bottomを設定すると本文がずれる場合の個人的対処法

【この記事を読むのに必要な時間は約〈 1 分32秒 〉です。】

ほんとに単純なんですが、margin-bottomをbeforeやafterといった疑似要素に設定した場合、なぜか下にある画像や本文がずれて困っていたのですが、意外と解決法は簡単でした(^_^;)

原因は?

これは下の本文と擬似要素が同じボックス内に存在していることが原因のようで、どう足掻いてもbottomを設定すると箱の内側にある要素はその分だけずれてしまいます。

対処法は?

これを避けてその要素を移動させたければ、単にmargin-bottomの反対側のmargin-topに負の数値を入力してやれば良かっただけでした。

(ちなみに基本ですがpaddingは負の数値を入れても働きませんが、marginは負の数値でも働いてくれます。)

例えば「少し(10pxほど)上に動かしたい!」という場合にはmargin-bottom: 10px;ではなくmargin-top: -10px;のような感じですね。

こうするとbottomは弄っていないので下のレイアウトに影響を与えずに画像を上にずらすことが出来ました。

まとめ

あくまでも個人的な対処法なので全てに使えるわけではないですが、意外な盲点でした。

もし同じようなことでお悩みの方は試してみてはいかがでしょうか。

というか、問題はたぶんCSSの基礎をすっ飛ばしすぎて、初歩的なことを理解してなかっただけの個人的な責任なんですけどね(笑)



オーサー紹介

ほんと参った

一応このブログの管理をやっております。 基本スタンスは「テキトーにやる」なので、あまり期待せずに見ていただければ幸いです。 何か御用がありましたらお問い合わせページよりご連絡ください。 ちなみにブログの人気記事を手直ししたnoteはこちらから購入できます。 クラウドソーシングでの仕事のご依頼はこちらからお願いします。

スポンサーリンク