CSS初心者にとっては、どちらがどのような余白なのか混乱しやすく最も苦手意識を持ちがちな「余白調整」ですが、美しいサイトに仕上げるためにはとても重要なポイントとなります。
今回はこの余白調整について詳しくご説明いたします。もくじ
◆marginとpaddingについて
CSSでは、要素のまわりに余白を指定することができます。
任意の値を指定するには「padding」と「margin」というプロパティを使用します。
この二つは混合しがちですが、marginは要素の外側に余白を指定、paddingは要素の内側に余白を指定することができます。
◆記述方法
marginとpaddingは、記述方法も指定できる値も全く同じです。
上下左右のmarginとpaddingをまとめて記述することもできます。
基本的な記述例は下記の通りになります。
（上下左右5pxの余白を指定する場合）
margin: 5px;
padding: 5px;
必要な部分だけを指定すれば、上下左右で別々の余白を指定できます。
・上→margin-top:／padding-top:
・右→margin-right:／padding-right:
・左→margin-left:／padding-left:
・下→margin-bottom:／padding-bottom:
記述例は下記になります。
(要素の上と右だけ10pxの余白を指定する場合)
margin-top: 10px;
margin-right: 10px;
上記のような記述でも問題はありませんが、コードが長くなってしまうので、上下左右の余白をまとめて一行で記述することもできます。
記述方法は、時計回りの順（上→右→下→左）になります。
記述例は下記になります。
（上30px、右20px、下5px、左5pxに指定する場合）
margin: 30px 20px 5px 5px;
上下、左右の値が共通の場合には、上下、左右でセットで記述する事ができます。
記述例は下記になります。
（上下5px、左右0pxに指定する場合）
margin: 5px 0;
◆行間の調整
CSSを使って行間の調整をして文章を読みやすくすることができます。
行間の調整で文章の読みやすさが変わってくるので、余白の調整と同様に行うべきものです。
行間の調整には、「line-height」というプロパティを使用します。
記述例は下記になります。
（10pxの行間を指定する場合）
line-height: 10px;
◆まとめ
初めは分かりづらい余白の調整ですが、経験を積むことで確実にスキルアップに繋がっていきます。
慣れるまでは、簡単な図を描いてみたり他のwebサイトではどのようにCSSを記述しているのかをチェックしてみることもおすすめです。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞