LoginSignup
2
0

More than 3 years have passed since last update.

中スクロールで右側のpaddingが入らない問題の対応

Last updated at Posted at 2019-12-03

はじめに

中スクロールを実装する際に時々以下のような右側のpaddingが入らない時の対応について紹介します。

スクリーンショット 2019-12-03 11.38.49.png

解決方法

結論を言うと、親要素も inline-block にしたらpaddingが入るようになりました。

原因

デフォルトのblock要素の横幅は親要素の幅一杯が限界で、ただ横を突き抜けてしまっているだけでした。
突き抜けちゃっているので、右側のpaddingの設定が効いていないように見えます。
(試しにoverflow: hiddenとかしたら途切れるのが分かると思います)
スクリーンショット 2019-12-03 11.42.33.png

inline-blockにすると親の幅関係なく子要素で作られた幅だけ伸びてくれるので、paddingもキチンと一番後ろのところで効くようになります。
スクリーンショット 2019-12-03 11.43.01.png

(ちなみこれが分からない時は擬似要素を入れて対応してました・・・)

まとめ

とりあえずinline-blockで横に並べる場合は親要素もinline-blockにしましょう!と言うことでした。
サンプルコードは以下に置きますので参考にして貰えますと幸いです。

See the Pen 横に並べる by wintyo (@wintyo) on CodePen.

2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0