为我的HTML div添加边框会移动我的文本

Question

我最近在学习一些html / css，并做了一个小项目来自己开始。我遇到了一个问题。我为div添加了1px纯黑色边框，它将我的文本从我div的背景中移开。我该如何解决这个问题？

Answer 1

尝试将属性添加到div：

box-sizing: border-box;

box-sizing的默认值为content-box，这意味着width和height是唯一在定义的高度和宽度中占据的内容。

相比之下，border-box使width，height，padding和border都在指定的宽度和高度范围内。< / p>

例如，在带有<div>的{​​{1}}中，内容（即文本）将为400像素x 400像素。添加box-sizing: content-box; height: 400px; width: 400px或border可以推送内容（就像您的情况一样）并使整个框更宽。另一方面，如果您使用相同的宽度和高度将其更改为padding，那么box-sizing将考虑所有这些尺寸属性（400px除外）。