CSS中的邊框是一種非常常見的元素。當我們定義一個元素的邊框時，它會占據該元素的高度和寬度。但是有時我們希望元素的邊框不占用它的高度。下面我們來看一下如何實現這個效果。

.box {
border: 1px solid gray;
box-sizing: border-box;
}

上面的代碼定義了一個基本的元素框。我們在.box類中設置了邊框的樣式，并在box-sizing屬性中將其設為邊框盒模型。這個模型使我們能夠在元素的內邊距和邊框內部工作，而不必擔心它們占據多少空間。

.box類的一個重要部分是box-sizing屬性。如果我們不將它設置為border-box，邊框將占據元素的高度，因為它們將被視為元素的內容。但是，如果我們將其設置為border-box，邊框將被視為元素的外殼，因此它們不會占據元素的高度。

通過使用這種方法，我們可以在不占據元素高度的情況下添加漂亮的邊框。這對于設計響應式布局以及使用多個邊框的設計非常有用。我們可以根據需求簡單地通過box-sizing屬性改變元素的高度包容邊框。