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
* indicates required fields
  • Comments must be approved before they are displayed

🙂 Using emojis in your blog:
• Keyboard shortcuts: For Mac, press [Ctrl + Cmd + Space]; for Windows, press [ Windows Key + . ]
• Copy and paste: Find a list of emojis and paste them into the text field.
  • none
  • center
  • left
  • right
If checked, your avatar will be displayed
Captcha
Happy
Sad
Surprise