iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

從零開始自學HTML/CSS網頁設計系列 第 16

CSS的盒子模組

  • 分享至 

  • xImage
  •  

如果你想要運用CSS將文章排版的話,就要知道如何控制留白。
CSS的留白分成「padding」和「margin」這兩個屬性,其中框內留白可以利用padding屬性,而框外留白可以利用margin,以下就來加以介紹這些屬性:

  • 盒子模組
    https://ithelp.ithome.com.tw/upload/images/20220929/20152190hxHA48QIft.png
    盒子為顯示文字、圖片的內容的區塊周邊,裡面包含邊距(padding)、邊框(border)、邊界(margin)等區塊,其中邊框(border)的內側可以加上背景色。
    https://ithelp.ithome.com.tw/upload/images/20220929/20152190uS9jbBr1jR.png
    padding、margin屬性可以在元素的上下左右加上留白。
    https://ithelp.ithome.com.tw/upload/images/20220929/20152190ny8exw5tFX.png
    padding、margin屬性也可以一次指定多個屬性值,在屬性值之間插入空白即可。

  • padding實作

article{
    padding: 32px 16px;
}

https://ithelp.ithome.com.tw/upload/images/20220929/20152190Ua5b1QnQG0.png
https://ithelp.ithome.com.tw/upload/images/20220929/20152190ov6xY7bSYZ.png

  • margin實作
section{
    margin: 46;
}

https://ithelp.ithome.com.tw/upload/images/20220929/20152190oX1sudqkJG.png


上一篇
class屬性與id屬性指定CSS的方法
下一篇
用CSS來裝飾表格
系列文
從零開始自學HTML/CSS網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言