第四天：盒模型計算

第 12 屆 iThome 鐵人賽

DAY 4

自我挑戰組

向CSScoke重新學習CSS系列第 4 篇

12th鐵人賽

洋蔥

2020-09-18 13:49:37

743 瀏覽

分享至

觀看金魚都能懂網頁設計入門 8

一個物件到底在畫面上佔據多少呢？

以上面範例來計算：

看得到的尺寸	看不到的尺寸
width + border + padding	margin
內容寬度+邊框+內推	外推

物件整體寬度：width + border + padding
物件整體寬度：300px + 20px + 40px
P.s 在畫面中，margin不能算是物件的整體寬度，它是兩物件往外推的距離，但他同樣會在畫面中佔據寬度，因此被稱為看不到的尺寸
https://codepen.io/mikeyam/pen/YzqOgQJ
可以透過以上範例在練習。
padding 及 margin 寫法相同|
------------- | -------------
padding:20px; |上下左右各20px
padding:16px 20px; |上下各16px，左右各20px
padding:10px 30px 20px; |上 10px，左右 30px，下 20px
padding:10px 3px 30px 5px; |上，右，下，左（順時鐘方向）