Question

我主要是一位参与HTML5和Javascript的C ++程序员。我的布局遇到了一些麻烦，我正在征求意见，并批评我是如何做的。

当我添加边距或填充时，我遇到的一个重复出现的问题是出现不需要的滚动条。这是我正在为Javascript应用程序工作的布局的模型。

每个方框都使用了课程＆＃39; text-line＆＃39;生成我的控件进入的一行。我想添加一个边距，以便成本框项目周围有一些空间。当我向文本行添加5px边距时，我的几何框在每个左/右面板中都有滚动条。

这是我添加边距的地方：

.text-line {
    font-size: 1.6em;
    box-sizing: border-box;
    width: 100%;
    margin: 0px;  /* no margins */
}

这可能是一个新手的错误，但我做错了什么，我该如何解决这个问题呢？我经常遇到这个问题，我已经阅读了很多材料，但我遗漏了一些东西。如果我发现任何其他主要布局错误，你可以指出它们吗？谢谢！

Answer 1

由于 .text-line 元素有width:100%;，如果它们也有边距，它们自然会溢出容器，因为默认情况下边距不会包含在width中值。

如果您想要内容和周围的空间，并且元素在宽度上填充其父级，则可以执行的操作是移除margin:5px并将此代码添加到 .text -line ：

-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;

上面的代码包括在中填充宽度值，因此您可以添加填充，元素仍将只获得您声明的width值。

Answer 2

尝试添加填充而不是边距，它会正常工作。要准确了解正在发生的事情，请查看css box model