当边框被移除时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的巨大差异感到困惑（因为我知道你也是）。

也许我们一个更有经验的朋友可以解释这一点。