如何使 DIV 的邊框出現在其尺寸內？

讓邊框出現在 DIV 元素內

在網頁設計中，了解元素如何互動和行為至關重要。開發人員遇到的一個常見問題是將邊框放置在 DIV 元素內，同時保持其所需的尺寸。

CSS 的預設行為是將邊框放置在元素的外邊緣，從而有效地增加其寬度和高度。為了解決這個問題，盒子大小屬性就發揮了作用。透過設定 box-sizing: border-box，邊框包含在元素的寬度和高度規格內，從而準確表示預期尺寸。

以下是一個範例來說明這個概念：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

在此範例中，第一個DIV 的box-sizing 屬性設定為border-box，使其寬度和高度均為100px，包括20px 邊界。相較之下，第二個 DIV 沒有定義 box-sizing 屬性，導致邊框超出元素的指定尺寸。

以上是如何使 DIV 的邊框出現在其尺寸內？的詳細內容。更多資訊請關注PHP中文網其他相關文章！