余白の調整
余白の調整
今日もHTMLの基礎をします。
これは私自身の頭の中の整理のために記載しております。
間違えや表現が違う可能性があります。
間違えや表現が違う場合は教えて頂けると嬉しく思います。
- 余白の調整
- 余白の種類
- 余白の記載方法
CSSを使用するときはHTMLファイルとは別にCSSファイルが必要です。
余白の調整
HTMLで記載した要素は基本的に縦に並びます。
これを横並びにするにはCSSファイルで指定をします。
ヘッダーの余白を調整することのいより
適切な配置になります。
余白を指定する場合はＣＳＳファイルに
”padding”を使用します。
HTMLファイル
＜div class="logo"＞
TEST１
＜/div＞
CSSファイル
.logo{
padding:20px;
}
paddingは上下左右の余白を追加する。
余白の種類
上を20px余白を作るには
.logo{
padding-top:20px;
}
下を20px余白を作るには
.logo{
padding-bottom:20px;
}
左を20px余白を作るには
.logo{
padding-left:20px;
}
右を20px余白を作るには
.logo{
padding-right:20px;
}
余白の記載方法
余白指定の記載方法は3種類あり
それぞれ記載します。
記載方法1
CSSファイル
.logo{
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
padding-left:10px;
}
記載方法2
CSSファイル
.logo{
padding:20px 10px 20px 10px;
}
上→右→下→左の順番で記載できる。（時計回り）
記載方法3
CSSファイル
.logo{
padding:20px 10px;
}
上と下、右と左が同じ場合はまとめて記載することができる
20PXが上下、10pxが左右のセットになる。
毎日少しづつ頑張ろう！！
