如何在不影响容器的情况下添加填充？

Question

我正在重新设计开源软件（Fedena）的登录页面。这些是my changes。如您所见，我在用户名/密码字段中使用背景图标。目前，输入到该字段的文本与图标重叠，我正在寻找避免这种情况的方法。

当我向其中一个字段添加30px左边的填充时，它会纠正问题（将光标放在图标前面），但它也会扩展字段的宽度。如何在不延长盒子的情况下成功插入所需的填充物？

Answer 1

将以下CSS添加到您的组件，例如： div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Answer 2

您应该使用CSS属性box-sizing。

将此设置为border-box。它将填充和边框计为宽度的一部分。

所以，在下面的例子中。即使使用100px填充和25px边框

，元素的宽度和高度也将继续为1px

.my-input-element {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 25px;
    border: 1px solid #000;
}