iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
Modern Web

每個人都可以做出理想中的網站!系列 第 24

Day24-CSS設計(9) / 版面設計(5)-Box Model(下)

今天要來講得就是 Box Model 的最後一part啦! 那就是我們的padding!
按照慣例,說明圖~
https://ithelp.ithome.com.tw/upload/images/20191009/20120965fYk19lMi76.png

padding

padding是一個div裡最靠近內容的設定,那麼為什麼會需要padding的設定呢?
為了看起來眼睛舒服啊哈哈哈哈哈
不要以為我在歐北貢嘿! /images/emoticon/emoticon15.gif
原因是如果padding值等於零的話,div內的文字就會非常貼近我們的border,這樣不是看起來很擠嗎~
所以為了視覺上的舒服,我們通常會在框內指定一些"留白",這樣會讓畫面好看不少,那麼也可以自行決定內距要設為多少px,或是使用百分比設定也可。

<div style="border: 3px yellow dashed;padding: 10px;">
</div>

那麼Box Model 的介紹就到這邊結束啦! /images/emoticon/emoticon34.gif


上一篇
Day23-CSS設計(8) / 版面設計(4)-Box Model(中中)
下一篇
Day25-CSS設計(10) / 清單
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言