输入框Placeholder不响应Padding，占位符与内边距重叠问题求助

你遇到的问题大概率是表单控件默认样式（比如form-control类，常见于Bootstrap这类框架）和自定义padding规则冲突导致的，以下是具体解决办法：

方案一：强制设置盒模型为border-box #

给输入框添加box-sizing: border-box，让padding被包含在元素宽高范围内，避免挤压内容区域，placeholder自然会和边框保持正常间距：

.modal-body input {
   border-radius: 6px;
   border: 1px solid #E4E4E4;
   padding: 16px;
   box-sizing: border-box; /* 关键修复属性 */
   width: 100%; /* 可选，确保输入框铺满容器宽度 */
}

方案二：移除固定高度限制 #

如果form-control类给输入框设置了固定height，会导致padding占用内容空间，进而引发placeholder和padding重叠。可以覆盖这个固定高度设置：

.modal-body input.form-control {
   border-radius: 6px;
   border: 1px solid #E4E4E4;
   padding: 16px;
   height: auto; /* 取消固定高度，由padding撑开输入框高度 */
   box-sizing: border-box;
}

方案三：直接调整placeholder样式（兜底方案） #

如果前两种方法无效，可以直接给placeholder设置内边距，强制它的显示位置符合预期：

.modal-body input::placeholder {
   padding: 0 16px; /* 和输入框的padding值保持一致 */
}

优先使用方案一和方案二，它们从盒模型根源解决问题，比直接修改placeholder样式更符合CSS规范。

内容的提问来源于stack exchange，提问作者Noah Clemmensen