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差异感到困惑（我知道你也是这样）。

也许我们经验丰富的朋友之一可以解释一下。