CSS矩形中間空白效果是一種常見的設計需求，可以通過CSS中的padding和box-sizing屬性來實現。在代碼中，可以使用pre標簽來展示CSS樣式。

.box {
width: 200px; /* 設置矩形寬度 */
height: 100px; /* 設置矩形高度 */
padding: 20px; /* 設置內邊距 */
box-sizing: border-box; /* 讓內邊距計算在矩形的寬度和高度內 */
background-color: #fff; /* 設置矩形背景顏色 */
border: 1px solid #ccc; /* 設置矩形邊框 */
}

以上代碼中，通過設置內邊距(padding)來讓矩形中間產生空白效果，box-sizing屬性設置為border-box可以讓內邊距計算在矩形的寬度和高度內。同時，可以通過設置背景顏色(background-color)和邊框(border)來美化矩形樣式。

需要注意的是，如果不使用box-sizing: border-box屬性，padding的大小會將矩形的寬度和高度撐大，破壞了我們希望實現的中間空白效果。因此，box-sizing屬性是非常重要的一個CSS屬性。

總之，CSS矩形中間空白效果是一種非常實用的設計技巧，在實現時需要注意box-sizing屬性的設置。通過pre標簽來展示CSS樣式，可以讓代碼更加醒目，便于理解和調試。