🌹マニュアル🌹WEB🌎HTML🌎余白指定

1月

1日

■余白調整

-----------------
上下左右に値を反映させる

CSSで、padding:値;　→　上下左右にその値の余白ができる。

HTML
< div class="logo1" >
Progate
< /div >

CSS
.logo1{
padding: 20px;
}

---------------
特定の方向にのみ値を反映させる

HTML
< div class="logo1" >
Progate
< /div >

CSS
.logo1{
padding-top: 20px;
}

上＝top
下＝bottom
左＝left
右＝right

--------------
方向別に値を変える

書き方１）上下左右をきちんと表記する
.logo1 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;

書き方２）省略計。上右下左（時計回り）で適用される
.logo1{
padding: 20px 10px 20px 10px;
}

書き方３）上下セットと左右セットとして表記する

.logo1{
padding: 20px 10px;

#html #マニュアル #余白