CSS②

今日も一日お疲れ様です。
今回はCSSのアウトプットをしていこうと思います。

1.余白

余白に関しては、２パターンのコードがあります。

まずは内側の余白を設定する「padding」です。

padding:100px;

上記のように入力することで、100pxの間隔で余白を設定することができます。また、paddingの後ろにtopなど入力することで余白を設定する場所を決めることができます。

・padding-top  上の余白
・padding-bottom　下の余白
・padding-right　右の余白
・padding-left　左の余白

また、

padding:50px,50px,100px,100px;

padding:50px,100px;

と入力することで、
上の余白を50px、右の余白を50px、下の余白を100px、左の余白を100pxに

上下の余白を50px、左右の余白を100pxに設定することができます。

外側の余白を設定する「margin」も同様になります。

2.枠線

CSSで枠線を設定するには「border」を使います。

border:10px solid red;

上記のように入力する事で,赤色でsolidの10pxの太さの枠線を設定することができます。

・10px：枠線の太さ
・solid：枠線の種類
・red：枠線の色

をさしています。

また、どの位置に設定するかは、paddingと同様にtopなどで設定することができます。

3.まとめ

まだまだ幅広いコードがあります。CSSは、Webサイトの作成では土台となる言語なのでしっかりと覚えていきたいです。

記事を読んでくださりありがとうございました。