内側の余白と外側の余白
内側の余白と外側の余白
今日もHTMLの基礎をします。
これは私自身の頭の中の整理のために記載しております。
間違えや表現が違う可能性があります。
間違えや表現が違う場合は教えて頂けると嬉しく思います。
- 内側の余白と外側の余白
- marginの種類
CSSを使用するときはHTMLファイルとは別にCSSファイルが必要です。
内側の余白と外側の余白
昨日のボーダーより上の余白と下の余白を設定します。
これまで余白を設定する際は”padding”を使用しておりましたが
これはボーダーの内側に設定です。
ボーダーの外側を設定するには”margin”を使用します。
HTMLファイル
＜div class="logo1"＞
TEST1
＜/div＞
CSSファイル
.logo1 {
border:3px solid #ff0000;
padding:10px;
margin:20px;
}
上記のpaddingでボーダーの内側に10pxの余白を作り
marginでボーダーの外側の部分に20pxの余白を作成します。
marginの種類
padding同様にmarginも上下左右指定することができます。
指定方法は以下の通りとなります。
CSSファイル①（全て記載し指定する方法）
.logo1{
margin-top:20px
margin-right:10px
margin-bottom:20px
margin-left:10px
}
CSSファイル②（一文で指定する方法）
.logo1{
margin:20px 10px 20px 10px
}
こちらの指定方法は時計回りとなっており
上→右→下→左となる。
CSSファイル③（一文で指定する方法）
.logo1{
margin:20px 10px
}
こちらの指定方法は、上下・左右は一つにまとめることができるので
最初の20pxが上下を指定して、10pxが左右を指定しています。
毎日少しづつ頑張ろう！！
