CSSで余白を作る(margin, padding) 方法を解説

Webサイト制作

CSS3

基礎

投稿日時 : 2024/11/10 更新日時 : -

ボックスを使ってCSSの余白について学ぼう。

margin: 外側に余白を作る。

padding: 内側に余白を作る。

マージンのスペルがmarginだったかmerginだったかど忘れしてしまいます

慣れの問題かな。書いたコードが反映されなかったらスペルミスかもしれない。注意して書こうな！

marginとpaddingのプロパティについて

プロパティ	値	説明
margin	[上] [右] [下] [左]の値	4つの値を指定。上下左右にpxや%で外側に余白を作る
margin	[上] [右左] [下]の値	3つの値を指定。[上][左右][下]にpxや%で外側に余白を作る
margin	[上下] [右左]の値	2つの値を指定。[上下][左右]にpxや%で外側に余白を作る
margin	[上下右左]の値	1つの値を指定。[上下左右]にpxや%で外側に余白を作る
margin-top margin-right margin-bottom margin-left	値	pxや%で外側に余白を作る
padding	[上] [右] [下] [左]の値	4つの値を指定。上下左右にpxや%で内側に余白を作る
padding	[上] [右左] [下]の値	3つの値を指定。[上][左右][下]にpxや%で内側に余白を作る
padding	[上下] [右左]の値	2つの値を指定。[上下][左右]にpxや%で内側に余白を作る
padding	[上下右左]の値	1つの値を指定。[上下左右]にpxや%で内側に余白を作る
padding-top padding-right padding-bottom padding-left	値	pxや%で内側に余白を作る

marginとpaddingの例

マージンとパディングの例を見てみよう。まずはmarginから

marginの記述例


<style>
.oya1 {
  width: 100%;
  height: 200px;
  background: skyblue;
}
.ko1 {
  width: 100px;
  height: 100px;
  background: green;
  margin: 20px 0 0 60px;
  display: inline-block;
}
</style>
<body>
 <div class="oya1">
  <div class="ko1"></div>
 </div>
</body>

緑のボックスが上が20px、左が60pxの余白ができている事を確認してくれ。

paddingの記述例


<style>
.oya2 {
  width: 100%;
  height: 200px;
  background: skyblue;
  padding: 40px;
}
.ko2 {
  width: 100px;
  height: 100px;
  background: green;
}
</style>
<body>
 <div class="oya2">
  <div class="ko2"></div>
 </div>
</body>

ko2は余白は指定していないが、oya2がpaddingで内側に余白を40px指定しているので、ko2の上と左に40pxの余白ができている事を確認する。

marginでボックスを上下左右中央に配置する方法

上下左右に均等に余白を入れるとボックスを中央に寄せる事が可能だ。この場合は親要素が縦と横の幅を指定している事や細かな条件がある。コードで例を出すが、君達のサイトで効かない場合もある。その場合は全ての親要素に幅が指定されているか、positionのプロパティは適切か確認してくれ。


<style>
.oya3 {
  width: 100%;
  height: 400px;
  background: skyblue;
  position: relative;
}
.ko3 {
  width: 100px;
  height: 100px;
  background: green;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>
<body>
 <div class="oya3">
  <div class="ko3"></div>
 </div>
</body>

oya3にposition:relativeを指定して、ko3にはabsoluteでそれぞれの方向を0にする。それに加えてmarginを上下左右にautoをかけると中央寄せになるのだ。relativeとabsoluteについては別のページで詳しく解説しようかな。この他にもflexboxを使ったやり方で中央寄せにできるので、flexboxのページで解説しようと思う。