2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[CSS入門] marginとpaddingはどのように使い分ければいいのか分かりやすく解説します!

CSSのmarginとpaddingの使い方を知りたい人

CSSのmarginとpaddingをどのように使い分ければいいのか知りたいな!

この記事は上記のような疑問を解消するものとなっています。

CSSで余白を作りたい場合、「margin」と「padding」を使用します。

margin」は境界線の外側の余白を作る際に使用して、「padding」は境界線の内側の余白を作る際に使用します。

この記事では「margin」と「padding」をどのように使い分ければいいのかを分かりやすく解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.marginとpaddingとは?

margin」と「padding」は両方とも余白をつくるためのプロパティですが、余白を作る場所が異なります。

marginとpaddingの違い
  • margin:外側に余白を作る
  • padding:内側に余白に作る

まずはmarginとpaddingとは何かボックスを用いてお話していきたいと思います。

内側と外側の境界線となっているのが「ボーダー」と呼ばれるものです。

ボーダー」の外側に余白を作るプロパティを「margin」と呼び、「ボーダー」の内側に余白を作るプロパティを「padding」と呼びます。




2.marginの使い方

margin」を利用して上下左右をそれぞれ設定する場合と上下左右を一括設定する2つの方法があります。

marginのプロパティに指定できる値

marginは「px」と「%」で指定することができます。

上下左右をそれぞれ設定する場合

プロパティ名 説明
margin-top 上のマージン
margin-bottom 下のマージン
margin-right 右のマージン
margin-left 左のマージン

それでは上記のプロパティを利用してマージン設定をしていきましょう。

上のマージンを30px・下のマージンを30pxと設定したい場合、以下のようなソースコードとなります。

上下左右を一括設定する場合

プロパティ名 説明
margin 上下左右のマージン

それでは上記のプロパティを利用してマージン設定をしていきましょう。

上のマージンを30px・下のマージンを30pxと設定したい場合、以下のようなソースコードとなります。

上下左右を一括設定できるmarginはプロパティ値を半角スペースで区切ることで上下左右自由に設定することができます。

marginの上下左右の設定方法は以下の通りです。

marginの指定場所 指定例
上下左右 margin: 30px;
上下 左右 margin: 30px 30px;
上 左右 下 margin: 30px 10px 30px;
上 右 下 左 margin: 30px 10px 30px 10px;




3.paddingの使い方

padding」を利用して上下左右をそれぞれ設定する場合と上下左右を一括設定する2つの方法があります。

marginのプロパティに指定できる値

paddingは「px」と「%」で指定することができます。

上下左右をそれぞれ設定する場合

プロパティ名 説明
padding-top 上のパディング
padding-bottom 下のパディング
padding-right 右のパディング
padding-left 左のパディング

それでは上記のプロパティを利用してマージン設定をしていきましょう。

上のパディングを30px・下のパディングを30pxと設定したい場合、以下のようなソースコードとなります。

上下左右を一括設定する場合

プロパティ名 説明
padding 上下左右のパディング

それでは上記のプロパティを利用してパディング設定をしていきましょう。

上のパディングを30px・下のパディングを30pxと設定したい場合、以下のようなソースコードとなります。

上下左右を一括設定できるpaddingはプロパティ値を半角スペースで区切ることで上下左右自由に設定することができます。

paddingの上下左右の設定方法は以下の通りです。

paddingの指定場所 指定例
上下左右 padding: 30px;
上下 左右 padding: 30px 30px;
上 左右 下 padding: 30px 10px 30px;
上 右 下 左 padding: 30px 10px 30px 10px;




4.まとめ

最後まで読んで頂きまして、ありがとうございました。

CSSでmarginとpaddingはよく使用するプロパティとなっているので、しっかりと理解しておく必要があります。

途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です