今天的封面主角是我們設計師最愛的 Figma (?)，我把他畫成很像膠囊跟糖果的感覺。

剛好今天會介紹網頁中的**「邊框」與「間距」**。其實網頁的樣式邏輯和 Illustrator、Figma 等向量軟體非常相近，內部填入「背景色」，外圈則能自由定義「邊框」的顏色與虛實線條。

雖然網頁元素預設都是矩形方塊，但只要搭配「圓角」就能變化出豐富的幾何造型，相信習慣向量繪圖的朋友一定能快速上手！

回到今天的主題！( • ̀ω•́ )

昨天我們介紹了盒模型最內層的「內容區塊（Content）」與「內部間距（Padding）」，學會了如何把元件由內而外撐起舒適的空間。

今天我們要順著「內容（Content） → 內部間距（Padding） → 邊框（Border） → 外部間距（Margin）」這個由內而外的脈絡，繼續介紹掌控視覺輪廓的「邊框（Border）」以及決定元素與周遭關係的「外部間距（Margin）」！

我們馬上來看看它們的特性與用法吧！！

邊框（Border）

邊框是環繞元素外圍的視覺界線，它不僅具有裝飾功能，也是盒模型計算的重要組成部分。透過 border 屬性，可以一次設定邊框的粗細、樣式和顏色：

.element {
  border: 粗細 樣式 顏色;

  /* 粗細 1px，實線，深灰色 */
  border: 1px solid #333;  
}

Border 邊框屬性

• 分別設定屬性

  邊框的粗細、樣式和顏色也可以單獨設定：

  .element {
    border-width: 1px;    /* 邊框粗細 */
    border-style: solid;  /* 邊框樣式 */
    border-color: #333;   /* 邊框顏色 */
  }
  

• 邊框樣式類型

  常見的邊框樣式包括：

  .element {
    border: 2px solid blue;    /* 實線 */
    border: 2px dashed red;    /* 虛線 */
    border: 2px dotted green;  /* 點線 */
    border: 4px double purple; /* 雙線 */
  }
  

  

• 單邊邊框設定

  可以針對上、右、下、左四個邊分別設定不同的邊框：

  • 可以針對上、右、下、左四個邊分別設定不同的邊框

    .box {
      border-top: 1px solid #333;     /* 上邊框 */
      border-right: 2px dashed red;   /* 右邊框 */
      border-bottom: 3px dotted blue; /* 下邊框 */
      border-left: 4px double green;  /* 左邊框 */
    }
    

  • 也可以只設定特定邊的屬性

    .box {
      border-top-width: 2px;
      border-right-style: dashed;
      border-bottom-color: red;
    }
    

Border-radius 圓角屬性

邊框除了可以設定粗細、樣式和顏色，還可以透過 border-radius 屬性來創造圓角效果，讓方正的元素邊角變得柔和。

.radius {
  /* 四個角都是 10px 圓角 */
  border-radius: 10px;
}

• 個別設定四個角

  border-radius 屬性可接受多個數值，依照元素左上、右上、右下、左下的順時針順序設定：

  • 順時針依序設定四個角的圓角

    .radius {
      /* 對應元素位置：左上右下 右上左下 */
      border-radius: 10px 20px;
    
      /* 對應元素位置：左上 右上 右下 左下 */
      border-radius: 10px 20px 10px 20px;
    }
    

  • 也可以分開設定

    .radius {
      border-top-left-radius: 10px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 20px;
    }
    

  

• 進階圓角

  • 橢圓形圓角：可以設定不同的水平和垂直半徑，創造橢圓形的圓角效果。

    .elliptical {
      /* 水平半徑 50px，垂直半徑 25px */
      border-radius: 50px / 25px;
    }
    

    

  • 像素單位 vs 百分比單位

    • 像素（px）：固定大小的圓角，不受元素尺寸影響

      .fixed-radius {
        width: 200px;
        height: 100px;
      
        /* 始終是 20px 的圓角 */
        border-radius: 20px;  
      }
      

    • 百分比（%）：依照元素邊長比例計算的圓角

      .percentage-radius {
        width: 200px;
        height: 100px;
      
        /* 水平半徑 40px，垂直半徑 20px */
        border-radius: 20%; 
      }
      

  • 常見形狀製作

    • 藥丸形狀：使用像素單位設定較大的圓角值，可以創造藥丸形狀

      .pill-shape {
        width: 160px;
        height: 80px;
        /* 圓角半徑等於高度的一半 */
        border-radius: 40px;
      }
      

      

    • 橢圓形：當元素為矩形且圓角半徑為 50% 時，會形成橢圓形

      .ellipse {
        width: 160px;
        height: 80px;
        border-radius: 50%;
      }
      

      

    • 正圓形：當元素為正方形且圓角半徑為 50% 時，會形成正圓形

      .circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      

      

使用建議

1. 在開發階段時，可以利用框線來檢查元件的位置和實際尺寸，方便版面調整。

   * {
     /* 將所有的元件套用上框線 */
     border: 1px solid #000;    
   }
   

   .box > * {
     /* .box 內的下一層元素套用上框線 */
     border: 1px solid #F00;    
   }
   

2. 要留意框線會佔有空間。例如，當設計滑鼠懸停 (hover) 效果時要新增框線，最好在預設狀態就先設定一個相同粗細的透明框線，避免元素尺寸變化。

   .button {
     /* 預設透明框線 */
     border: 2px solid transparent;
     &:hover {
       /* 懸停時顯示實色框線 */
       border: 2px solid #333;
     }
   }
   

   

3. 設計圓角時，內外邊界應使用相同的圓心點，而非相同的數值半徑，這樣能創造較自然的視覺效果。

   

4. 使用圓角後，需要給予足夠的內部間距，這樣視覺效果會更加舒適。

   

外部間距（Margin）

使用 margin 屬性可以調整元素的外部間距，它是元素與其他元素之間的空白區域，屬於「元素外部空間」，由於外距位於元素外部，所以不會顯示背景色，也不屬於元素的互動區域。

透過 margin 屬性在元素與其他元素之間預留適當的空白區域，可增加元素之間的視覺分離，避免元素互相緊貼。

• 間距可以針對四個邊分別設定

  .element {
    /* 四邊外距都是 20px */
     margin: 20px;
    /* 上下外距 10px，左右外距 20px */
     margin: 10px 20px;  
    /* 上右下左內距，順序為順時針 */         
     margin: 5px 10px 15px 20px;  
  }
  

• 上下左右也可以分別設定

  .element {
  	 margin-top: 5px;
  	 margin-right: 10px;
  	 margin-bottom: 15px;
  	 margin-left: 20px;
  }
  

margin 和 padding 雖然都是控制間距，但 margin 有一些 padding 沒有的特性：

• 外部間距支援負數：margin 可以設定為負值，這會讓元素之間產生重疊效果，也可用來進行細微的位置調整。

  .box {
  	 margin-bottom: -10px;
  }
  

  

• 水平外距設定可實現元素水平置中：左右外距設定為 auto 時，這個特殊關鍵字可以實現元素水平置中。

  .box {
  	margin: 0 auto;
    width: 100%;
    max-width: 1200px;
  }
  

  

• 垂直方向的外距會互相重疊：當兩個元素的外距相鄰時，margin 在垂直方向會產生重疊現象。以下例子可以說明這個特性。

  <div class="box"></div>
  <div class="box"></div>
  

  .box {
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    display: block;
    margin: 20px 0;
  }
  

  當兩個元素都是 block 承垂直排列時，若各自設定上下方向的 margin 為 20px，它們之間的實際間距仍然只有 20px，而不是 40px。

  而當兩個元素都是 inline-block 並水平排列時，若各自設定左右方向的 margin 為 20px，它們之間的實際間距會是 40px（兩個 margin 相加）。

  .box {
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    display: inline-block;
    margin: 0 20px;
  }
  

  

使用建議

1. margin 主要用來控制「元素之間的距離」，而在內層元素使用 padding 來調整「內容與邊界的距離」。雖然兩者都是用來空出間距，但使用時應該明確區分各自的用途，這樣 CSS 才能更容易維護。
2. 避免外距重疊造成的佈局問題當設計多層級元素時，需特別注意外距重疊現象。

總結

這兩天我們完整拆解了 CSS 盒模型（Box Model）由內而外的四大核心結構：

• 內容（Content）：實際放置文字、圖片等資料的核心區域，決定元素的基本尺寸。
• 內部間距（Padding）：內容與邊框之間的空白區域，屬於元素的內部空間。
• 邊框（Border）：環繞在內距外圍的視覺界線，也是盒模型結構的重要邊界。
• 外部間距（Margin）：元素與其他相鄰元素之間的空白區域，屬於元素的外部空間。

只要記住「Padding 向內推開內容、Margin 向外推開鄰居」的原則，切版時就不容易遇到間距混亂的問題囉！

搞懂了這四層結構後，明天我們將帶大家認識 box-sizing，徹底解決「為什麼加了 padding 和 border 寬度就爆掉」的新手坑，敬請期待！(ﾉ>ω<)ﾉ