當邊框被移除時div縮小

Question

我遇到問題。我有以下佈局This Weaver。 （請務必全屏查看 - 該按鈕位於右下角。）

我的問題是：當我更改邊框元素（.centered選擇器中的邊框元素 - 圍繞第238-240行）時， div似乎圍繞它內部的內容縮小。我有一個背景圖像，邊框存在時它就在那裏，但是當你移除邊框元素時，圖像也會縮回。

爲了更好的解釋，請訪問上面的Weaver，並嘗試刪除第239行。看看會發生什麼。不幸的是，我爲了說明的目的添加了邊界，我需要將其刪除，但是發生的情況是不可接受的。

我需要它保持原樣，但沒有邊框（或者如果你可以找到一種方法使其不可見並且具有所期望的效果）。請幫忙！如果我不夠清楚，請告訴我，我會進行編輯。

Answer 1

你可以做一個邊框通過border-color屬性透明：

.borderless { border-color: transparent; } 

這可以通過其他邊境相關的屬性，像這樣縮短成一行：

.borderless { border: 2px solid transparent; } 

，如果您喜歡的東西可以順利過渡，考慮RGBA值：

.centered { border: 2px solid rgba(0, 0, 0, 1); } 
.borderless { border: 2px solid rgba(0, 0, 0, 0); } 

任何這些方法都將維持佈局，因爲邊界在技術上仍然存在並佔用空間。如果你不斷地發現自己不得不與佈局上，你會意外轉移問題，可以嘗試尋找到box sizing：

* { box-sizing: border-box; } 

將鼓勵佈局元素包裹邊框與他們計算的尺寸，並會劃分在時尚這更表現直觀。

Answer 2

我認爲這與the box model，並使用填充與邊距。

.s_container{ 
    margin-top: 20px; 
    } 

開關：

.s_container{ 
    padding-top: 20px; 
    } 

，它似乎對我的機器上正常工作。

說實話，我不明白爲什麼在#configurator-container div中添加/刪除邊框會導致此行爲。

我對盒子模型的理解是，如果你添加一個邊框，它的邊緣從填充距離的地方開始。我對邊界存在造成的20px的巨大差異感到困惑（因爲我知道你也是）。

也許我們一個更有經驗的朋友可以解釋這一點。