CSS 設置 Border 不占寬度 在使用 CSS 設計時，我們常常需要為元素設置邊框，以使其更加美觀和清晰，但有時候在設置邊框的同時，會發現元素的實際寬度會增加，這可能會影響其他元素的布局和排版。那么怎么樣可以讓邊框不占用元素的寬度呢？ 在 CSS 中，我們可以使用 box-sizing 屬性來控制元素的盒模型。默認情況下，元素的盒模型是 content-box，即元素的寬度只包括內容的寬度，不包括邊框和內邊距的寬度。而當我們為元素設置邊框時，邊框的寬度會被加到元素的實際寬度中，從而導致元素寬度的增加。 為了解決這個問題，我們可以將元素的盒模型設置為 border-box。這樣，元素的寬度就包括了邊框和內邊距的寬度，而不是僅僅包括內容的寬度。因此，即使我們為元素設置邊框，它也不會影響元素的實際寬度。 下面是一個實例，展示如何使用 CSS 設置 border 不占寬度：

p {
box-sizing: border-box;
width: 200px;
border: 5px solid black;
padding: 20px;
}

在上面的代碼中，box-sizing 屬性被設置為 border-box，元素的寬度被設置為 200px，同時還為元素設置了 5px 的黑色實線邊框和 20px 的內邊距。因為 box-sizing 屬性被設置為 border-box，所以元素的寬度實際上是包含了邊框和內邊距的寬度的，因此即使有邊框存在，元素的實際寬度也仍然是 200px。 總結 通過將元素的盒模型設置為 border-box，我們可以讓元素的實際寬度包括邊框和內邊距的寬度，從而避免因為邊框的存在而導致元素實際寬度的增加。這個方法對于頁面的排版和布局非常有用，因此建議多加注意。