前言

今天我嘗試前面所述的box model知識練習做一個箱子！

練習開始

<!-- 擷取html片段 -->
    <div class="box1">
        <p>꜀(^. .^꜀ )੭</p>
    </div>
    <p>喔這太大了</p>
    
    <div class="box2">
        <p>꜀(^. .^꜀ )੭</p>
    </div>
    <p>喔這太擠了</p>

    <div class="box3">
        <p>꜀(^. .^꜀ )੭</p>
    </div>
    <p>喔這很剛好</p>

/* 擷取css片段 */
.box1 p {
    font-size: 40px;
}
.box1{
    background-color: peru;
    height: 100spx;
    width: 300px;
    padding: 0px 0px 0px ;
    border: 10px solid saddlebrown;
    margin: 20px ;
}

.box2 p {
    font-size: 40px;
}
.box2{
    background-color: peru;
    height: 30px;
    width: 160px;
    padding: 0px 0px 30px 0px;
    border: 10px solid saddlebrown;
    margin: 80px ;
}

.box3 p {
    font-size: 40px;
}
.box3{
    background-color: peru;
    height: 30px;
    width: 160px;
    padding: 0px 0px 60px ;
    border: 10px solid saddlebrown;
    margin: 20px ;
}

解說

我練習建立三個box，從實作理解box model如何運作。

margin

首先，可以發現三個box距離左邊位置不太一樣。

是由於三個box設定margin屬性的值不同，所以距離離左邊邊界有差異。

.box1  {
    margin: 20px;
}
.box2  {
    margin: 80px;
}
.box3  {
    margin: 20px;
}

邊距重疊

當我去掉中間文字描述部分，可以觀察到邊距重疊發生。
如下圖黃色區域：

黃色區域為上下兩個box重疊部分，而且都是取兩個元素邊距中最大的邊距。

padding值寫法

再來說到padding，我覺得是很需要注意的小細節，在練習裡會發現我有宣告padding4個數值，也有宣告3個數值，那究竟哪種寫法才是正確的呢？

.box1{

    padding: 0px 0px 0px ;
}

.box2{

    padding: 0px 0px 30px 0px;
}

如果想讓上內邊距為10px、右內邊距為20px、下內邊距為30px、左內邊距為40px，可以這樣寫：

.box{

    padding: 10px 20px 30px 40px;
}

值的順序非常重要，所代表方位都不一樣，
padding: 上 右 下 左
若是容易忘記可以記為時鐘順時針方向繞一圈。
另一種記憶方法，口訣「TRouBLe」，TRBL就是「Top Right Bottom Left」的縮寫。

另外，padding值也可以混合使用不同的長度單位：

.box{

    padding: 10px 5em 0.1in 40ex;
}

如果只宣告三個值或甚至兩個值呢？

如果「上」、「下」或「左」、「右」兩邊僅有一個數值宣告時就代表兩個方向（「上」「下」或「左」「右」）共享一個數值。

.box{

    padding: 10px 20px 30px ;
}
/* 上：10px 右左：20px 下：30px */

.box{

    padding: 10px 20px;
}
/* 上下：10px 右左：20px*/

可以由下方表格會比較清楚：

補充：除了padding，margin和border值寫法邏輯也是一樣。