CSS 程式札記 : margin、padding、border、box-sizing

本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。

margin（外邊距）

margin 指的是元素外部的空間。它可以用來控制元素與其它元素之間的距離。例如：

div {
    margin: 20px;
}

這段代碼會在 div 元素的所有四邊添加 20 像素的外邊距。

個別設置 margin

您也可以個別設置每一邊的 margin：

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

這些屬性也可以簡化成單一個margin屬性，但要注意方向 margin:上 右 下 左。

padding（內邊距）

padding 是指元素內部與內容之間的空間。這會影響到元素內部的版面配置。例如：

div {
    padding: 25px;
}

這會在 div 元素內部的所有四邊添加 25 像素的內邊距。

個別設置 padding

就像 margin 一樣，您可以為 Padding 的每一邊設定不同的值：

div {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 20px;
}

可以簡化成一個padding屬性，但要注意方向padding:上 右 下 左。

border（邊框）

border 是圍繞在元素外圍的線條。它可以定義大小、風格和顏色。例如：

div {
    border: 2px solid black;
}

這會在 div 元素的四周添加一個 2 像素寬、實線、黑色的邊框。

個別設置 border

您也可以個別設置邊框的各個面：

div {
    border-top: 2px dotted red;
    border-right: 3px dashed green;
    border-bottom: 4px solid blue;
    border-left: 5px double yellow;
}

可以簡化成一個border屬性，注意所有方向的邊框都是統一樣式border: 邊框粗細 邊框顏色 邊框樣式 。

box-sizing（盒模型）

box-sizing 是一個非常重要的 CSS 屬性，它影響到元素的尺寸計算方式。有兩個值可選：content-box 和 border-box。

• content-box：這是預設值，元素的寬度和高度僅包括內容。
• border-box：元素的寬度和高度包括內容、padding 和 border。

div {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

在 border-box 下，這個 div 元素的總寬度仍然是 300px，包括了 Padding 和 Border。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡