Box Model

CSS把一個元件看成是一個一個盒子

1.Content Area:

就是所寫的內容，例如圖片或者文字

Example:

2.Border:

元件的邊框(border)。他是有形的線段，因此CSS可以控制border的粗細、顏色。

.sin
{
    border-color: black; /* 邊框色彩為黑色*/
    border-width: 1px; /* 粗細為1px*/
    border-style: solid; /* 實心 */
    background-color: #a7cece;
}

結果:

==> padding沒有設定，所以文字與邊框靠得很緊密，而且邊線跟頁面的邊界靠得很近。

3.Padding:

padding是透明的 ，沒辦法做色彩上特效。

padding有分別控制上、下、左、右

.sin
{
    border-color: black; /* 邊框色彩為黑色*/
    border-width: 1px; /* 粗細為1px*/
    border-style: solid; /* 實心 */
    background-color: #a7cece;
    /* border 同上 */

    padding:    25px; /*上下左右都增加25px */

}

結果:

==> 字與邊線有一段25px的距離

padding 便捷的寫法:

padding: 2px 3px 4px 5px; // 分別為上、右、下、左

如果都是一樣20px，則

padding: 20px;

4.Margin:

邊界(margin)提供元件與其他同頁的元件增添距離的方式，邊界也是透明的，沒辦法裝飾。

margin有分別控制上、下、左、右。

.sin
{
    border-color: black; /* 邊框色彩為黑色*/
    border-width: 1px; /* 粗細為1px*/
    border-style: solid; /* 實心 */
    background-color: #a7cece;
    padding:    25px; /*上下左右都增加25px */

    /*同上*/

    margin:    30px; /*上下左右都增加30px */
}

Result:

==> 與網頁邊界變成相距30px。

margin 便捷的寫法:

margin: 2px 3px 4px 5px; // 分別為上、右、下、左

如果都是一樣20px，則

margin: 20px;