HTML個人講座13日目

こんにちはcairnです。

HTML個人講座13日目です。

今日はボックスの内幅、またはボックス周りの幅の設定方法です。

まずボックス周りの幅の設定方法では『margin:;』を使用します。

上下左右の幅を変える場合は

maegin: 40px;

上だけ幅を変える場合は

margin-top: 40px;

下だけ幅を変える場合は

margin-bottom: 40px;

左だけ幅を変える場合は

margin-left: 40px;

右だけ幅を変える場合は

margin-right: 40px;

上下左右の幅を不揃いに変える場合は

margin: 10px 20px 30px 40px;

↑これを詳しく解説すると

10pxが上

20pxが右

30pxが下

40pxが左

上下と左右の幅を分けるには

margin: 10px 20px;

↑これを詳しく解説すると

10pxが上下

20pxが左右

上と下と左右の幅を分けるには

margin: 10px 20px 30px;

↑これを詳しく解説すると

10pxが上

20pxが左右

30pxが下

となります。

続いてボックスの内幅を変更する方法です。

使用するのは『padding:;』です。

上下左右の変更方法は『margin』と同じになりますので説明は省きます。

上記の物を入力配置した例は下記のとおりです。

div{
width: 500px;
height: 200px;
background-color: red;
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
}

本日はここまで( ´∀｀ )