在網(wǎng)頁設(shè)計中，我們經(jīng)常需要設(shè)置元素的高度。但是有時候，元素的具體高度可能難以確定，這時候我們可以設(shè)置元素的可用高度。 首先，我們需要了解兩種高度的概念：元素的高度和元素的可用高度。元素的高度指的是元素在文檔流中所占的高度，包括元素的內(nèi)邊距、邊框和外邊距。而元素的可用高度則指的是元素實際可顯示內(nèi)容的高度，不包括元素的內(nèi)邊距、邊框和外邊距。 在CSS中，我們可以使用height屬性來設(shè)置元素的高度。例如：

p {
height: 100px;
 }

上面的代碼將會把所有的段落元素的高度設(shè)置為100像素。但是這樣設(shè)置會忽略元素的內(nèi)邊距、邊框和外邊距，導(dǎo)致實際顯示內(nèi)容變得擁擠。 為了解決這個問題，我們可以使用box-sizing屬性來改變元素的盒模型。設(shè)置box-sizing為border-box可以讓元素的內(nèi)邊距和邊框都計算在元素的高度內(nèi)。例如：

p {
box-sizing: border-box;
height: 100px;
padding: 10px;
border: 1px solid #000;
 }

上面的代碼將會把所有的段落元素的高度設(shè)置為100像素，同時考慮元素的內(nèi)邊距和邊框。但是這樣設(shè)置又會忽略元素的外邊距，導(dǎo)致元素之間變得靠得很近。 為了解決這個問題，我們需要使用calc()函數(shù)。calc()函數(shù)可以讓我們在設(shè)置元素的高度時，同時考慮元素的內(nèi)邊距、邊框和外邊距。例如：

p {
box-sizing: border-box;
height: calc(100px - 20px);
padding: 10px;
border: 1px solid #000;
margin-bottom: 20px;
 }

上面的代碼將會把所有的段落元素的高度設(shè)置為100像素，同時考慮元素的內(nèi)邊距、邊框和外邊距，保證元素之間的間距為20像素。這樣設(shè)置，就可以讓網(wǎng)頁更美觀、更舒適了。