Search Bloguru posts

こんにちは。紫のバラの人です。

https://en.bloguru.com/love

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

thread
■余白調整

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

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

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

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

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

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

.logo1{
padding: 20px 10px;

#html #マニュアル #余白

People Who Wowed This Post

  • If you are a bloguru member, please login.
    Login
  • If you are not a bloguru member, you may request a free account here:
    Request Account
Happy
Sad
Surprise