在CSS中，每個HTML元素都被看作是一個框（box），也稱為盒子（box）。CSS盒子模型主要由四個部分組成，分別是：內容（content）、填充（padding）、邊框（border）和外邊距（margin）。這些組成部分決定了元素在頁面上所占據的空間大小。

當需要改變一個元素的間距時，可以通過調整盒子的內外邊距來實現。內邊距指元素的內容與邊框之間的距離，而外邊距指元素邊框與其周圍元素邊框之間的距離。

.box {
background-color: #ccc;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}

在上述例子中，我們使用了一個類名為"box"的CSS樣式來設置盒子模型。通過設置padding屬性和margin屬性來改變元素的內外間距。在這里，我們設置了內容與邊框之間的距離為20px，元素邊框與周圍元素邊框之間的距離為10px。

需要注意的是，當設置元素的寬度和高度時，所設置的值并不包括padding、border和margin。例如，設置一個元素的寬度為200px，但同時設置了20px的padding和1px的邊框，那么該元素在頁面中所占據的實際寬度是222px（200px + 20px + 1px + 1px）。

為了避免這種情況發生，可以使用box-sizing屬性來改變盒子模型的計算方法。默認情況下，元素的寬度和高度不包括padding和border。而當設置box-sizing屬性為border-box時，元素的寬度和高度會包括padding和border的值。

.box {
background-color: #ccc;
padding: 20px;
border: 1px solid #000;
margin: 10px;
box-sizing: border-box;
}

在上述例子中，我們將box-sizing屬性設置為border-box，這樣元素的寬度和高度就會包括padding和border的值。這樣就可以避免因為padding和border導致元素超出所設置的寬度和高度而產生的問題。