CSS (Box Model)

哈囉，今天我們來介紹CSS的Box Model~

每天我都會將這篇文章裡的關鍵字、使用的語法、問題等做成清單，透過回想或許能幫助您加深記億喲

今天的關鍵字是 ...

• Box Model - margin、content、border、padding

Box Model

哈囉，今天我們來介紹CSS的Box Model，它是一種用於描述元素在網頁佈局中所占空間的模型，它將元素視為一個矩形框，包括
內容(content) : 元素的實際內容區域。
內邊距(padding) : 用於控制元素內容與邊框之間的距離。
邊框(border) : 定義元素的邊界。
外邊距(margin) : 控制元素與其他元素之間的距離。
讓我們透過實作來看看吧~

1. 首先打開codepen，我們先建立一個區塊元素，並用CSS設定寬、高、邊框。
   瀏覽器本身會有一些預設值，這就是在沒有任何設定的情況下，這個框框左、上都會有一些留白的原因。我們點選紅圈處，可以進行CSS的內部設定。
   

2. 點選CSS Reset並儲存，我們可以將瀏覽器的預設樣式都清空，以便我們能更清楚了解邊距的操作。
   

3. 為了能更仔細觀看，我們將box1的框線換色並增加寬度，同時新增第二個box2，<div>是區塊元素，正常來說它是不能跟其他元素並排的，它會獨佔一行，所以當你建立第二個box2的時候，box2與box1不會並排，它會緊貼著box1的下方。
   首先我們先來了解box1的寬高範圍，也就是藍色區塊的部分，你會發現，調整了border後，box1比box2還要大了。
   

4. 接著我們在box1新增padding:60px，這代表box1上右下左都內推了60px，是綠色區塊的部分。從上圖你會看到調整了border、padding後，box1比box2還要更大了，那是因為元素在網頁中的實際大小不只有box1的寬高還有border及padding的距離，這3個加總才會是一個元素在網頁上的實際內容區域( content ) :
   實際寬度 = 寬 : 300px +( padding : 60px +60px )+( border : 20px + 20px )= 460px
   實際高度 = 高 : 300px +( padding : 60px +60px )+( border : 20px + 20px )= 460px
   

5.我們加入margin:50px後會發現，box1在網頁實際佔的範圍仍然是460px

最後總結，content ( CSS 的元素中元素在網頁佈局中所占空間 ) : 由設定的寬高 + padding + border加總而成。

margin、padding的間距調整

你可能會想到如果上下左右的距離都要不一樣的話辦得到嗎 ?
可以的~讓我們來看看，首先建立第3個box…
margin: 20px 30px 40px 50px，設定分別為margin:上 : 20px、右 : 30px、下 : 40px、左 : 50px。

margin: 20px 30px 40px，設定分別為margin:上 : 20px、右 : 30px、下 : 40px、左 : 40px。

margin: 20px 30px ，設定分別為margin:上 : 20px、右 : 30px、下 : 20px、左 : 30px。

示範程式碼 : https://codepen.io/ywngjyyj-the-vuer/pen/XWoZZMr

今天就到此結束拉~明天我們來學習CSS的display屬性及position屬性