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); }

这些方法中的任何一种都将保持布局，因为边界在技术上仍然存在并占用 space。如果您继续发现自己遇到布局意外移动的问题，请尝试查看 box sizing:

* { box-sizing: border-box; }

将鼓励布局元素用计算出的大小包裹边框，并使划分的行为更加直观。

Answer 2

我认为这与 the box model 以及使用填充与边距有关。

.s_container{
    margin-top: 20px;
    }

切换到：

.s_container{
    padding-top: 20px;
    }

它似乎在我的机器上运行良好。

老实说，我真的不明白为什么 adding/removing #configurator-container div 的边框会导致这种行为。

我对盒子模型的理解是，如果添加边框，它的边缘将从填充停止的地方开始。我对边框的存在造成的 20px 大差异感到困惑（我知道你也是）。

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

Div shrinks when border is removed