如何用CSS让输入框适配父div宽度（保留内边距）

嘿，这个问题我太熟啦！这是CSS标准盒模型搞的鬼——默认情况下，元素设置的width只算内容区域的宽度，padding和border会额外加到总宽度上，所以你的input加上左右各12px的padding后，总宽度就超过父级.row的100%了，自然就溢出啦。

不用删padding，这几个方法都能解决，按优先级给你列出来：

方案一：使用box-sizing: border-box（最推荐） #

这是现代前端开发的常规操作，直接从根源解决盒模型的宽度计算问题。这个属性会让浏览器把padding和border都包含在你设置的width值里，再也不用手动算宽度了。

你可以全局给所有元素设置，避免以后再踩同样的坑：

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box; /* 新增这行核心代码 */
}
.inp {
  display: block;
  padding: 6px 12px;
  width: 100%;
  height: 44px;
  font-size: 14px;
  background-color: #f00;
}

当然，也可以单独给.inp添加box-sizing: border-box;，效果是一样的。

方案二：用calc()手动计算宽度 #

如果你不想修改全局盒模型，可以用CSS的calc()函数，直接把width设置为父级宽度减去左右padding的总和。你的input左右padding各12px，总共24px，所以代码改成这样：

.inp {
  display: block;
  padding: 6px 12px;
  width: calc(100% - 24px); /* 替换原来的width:100% */
  height: 44px;
  font-size: 14px;
  background-color: #f00;
}

这个方法需要你精准计算padding的总和，要是以后padding数值变了，width也要跟着改，灵活性不如方案一。

方案三：利用父级padding间接控制 #

给父级.row添加左右padding，然后让input自动填满父级的内容区域（display:block的元素默认width:auto，会自适应父级宽度）：

.row {
  padding: 0 12px; /* 给父级添加左右padding */
}
.inp {
  display: block;
  padding: 6px 12px;
  /* 去掉width:100%，或者设置width:auto */
  width: auto;
  height: 44px;
  font-size: 14px;
  background-color: #f00;
}

这种方法相当于把原本input的外部“溢出空间”转移到了父级，也能达到不溢出的效果，但需要调整父容器的样式。

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