【CSS】ボックスに関するプロパティまとめ

余白を設定する:margin

ボックス要素の外枠の間隔を指定します。

p{
  background-color:blue;
  margin:50px;
}

注意事項としては、上下の要素でmarginが指定されていた場合、足された数にはなりません。

margin-bottom:10pxの要素と、margin-top:20pxの要素が並んでいた場合、両者の要素の間は20pxとなります（10px分は重なっている）。これは「margin同士は重なる」という性質を持っているがために起こる現象ｄえす。

余白を設定する：padding

要素内の余白を設定する場合にはpaddingを使います。

p{
  background-color:blue;
  padding:20px;
}

ボーダーを設定する：border

div{
  border-style:solid;
  border-color:red;
  border-width:10px;
}

borderをつけるには、初めにborder-styleで、線種を指定する必要があります。これがないとボーダーが表示されません。

次のように、まとめて書く方法もあります。

border: 10px ridge rgba(170, 50, 220, .6);

幅と高さを指定する：width、height

ボックスの幅・高さを指定します。

div{
 background-color:red;
 width:200px;
 height:200px;
}

ボックスのサイズですが、marignやpaddingなどを使用している際は、widthやheightの値よりもはみ出すことがあります。marginやpaddingを含めての幅・高さであることを示すにはbox-sizingプロパティを使います。

box-sizing: border-box;

背景画像を加える

<div id = cover>
</div>

#cover{
  width:100%;
  height:200px;
  background-image:url(https://manabu-biology.com/wp-content/uploads/2020/09/Rhacophorus_nigropalmatus.jpg);
  background-size:cover;
}

background-image:urlでは、指定した画像を背景に設定することができます。

background-sizeでは、背景画像の表示の仕方を指定できます。coverは全体を覆うように拡大縮小します。

最小最大の幅・高さを指定する：min-width,min-height,max-width,max-height

最低最大の幅・高さを指定するにはmin-width,min-height,max-width,max-heightを使用します。

div{
  background:yellow;
  height:50px;
  min-width:100px;
  max-width:200px;
}

上のボックスは横幅が100px以上、200px以下に設定されています。ブラウザを拡大縮小しても最小100px最大200pxにしかなりません。

角を丸くする

div{
  height:200px;
  width:200px;
  border-radius:70px;
  background:blue;
}