測試你的技能：盒子模型

此技能測試的目的是評估你是否瞭解CSS 盒子模型。

注意：你可以在此頁面上的互動式編輯器或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的溝通渠道聯絡我們。

任務 1

在這個任務中，下面有兩個盒子，一個使用標準盒子模型，另一個使用替代盒子模型。透過向.alternate類新增宣告來更改第二個盒子的寬度，使其與第一個盒子的視覺寬度匹配。

最終結果應如下面的影像所示

Two boxes of the same size

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行編輯。

任務 2

在這個任務中，新增到盒子

  • 一個5畫素的黑色點狀邊框。
  • 20畫素的上邊距。
  • 1em的右邊距。
  • 40畫素的下邊距。
  • 2em的左邊距。
  • 所有側邊1em的內邊距。

最終結果應如下面的影像所示

A box with a dotted border

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行編輯。

任務 3

在這個任務中，內聯元素具有邊距、填充和邊框。但是，上下的行與其重疊。您可以在 CSS 中新增什麼內容，以便其他行尊重邊距、填充和邊框的大小，同時仍然保持元素內聯？

最終結果應如下面的影像所示

An inline box with space between it and the text around it.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行編輯。