フリーランスが営業なしで受注する方法5つ

CSSで右に余白ができる場合の対処法

webコーディングをする上で右に余白ができる場合の対処法を簡単な順に4つお伝えします。

1.CSSで右に余白ができる問題

コーディングをしていて、右に白い余白ができてしまう。

2.CSSで右に余白ができる場合の解決策

簡単な順から4つ試してみましょう。

overflow:hideen;とwidth:100%;をbody直下のinnerに設定

HTML

CSS

 

overflow:hideen;を各section内のinnerに設定

bodyより中のdivタグに設定しましょう。
例えば下記のように各コンテンツのinnerタグ内に設定しましょう。

HTML

CSS

 

<div>の数が合っているか確かめる

たとえばdivの閉じタグが多すぎな場合、右に余白ができます。

HTML

 

sectionやheaderに設定しているpaddingを外す

paddingを設定したい場合は、headerやsectionに設定するのではなく、中にcontainerなどを設置してそこに設定ましょう。

HTML

 

変更前CSS

 

変更後CSS