<!DOCTYPE html> 更改输入文本框大小（高度和宽度）[重复]答案

【问题标题】：<!DOCTYPE html> changes input textbox size (height and width) [duplicate]<!DOCTYPE html> 更改输入文本框大小（高度和宽度）[重复]
【发布时间】：2026-02-07 21:25:01
【问题描述】：

我的 html 页面看起来像我想要的那样，突然我的输入 text-s 变得比我想要的大一点，我试图修复它，发现我放置的 <!DOCTYPE html> 是这样做的：

带有

这是放置

之前的样子

这是我的代码：

<select style="font-size:20px;padding-left:20px;border-radius:20px; height:40px;width:80%;max-width:500px;" onchange="change(this)" id="pitanja">
  <option value="1">Prvo pitanje?</option>
  <option value="2">Drugo pitanje?</option>
  <option value="3">Treće pitanje?</option>
  <option value="4">Četvrto pitanje?</option>
  <option value="5">Peto pitanje?</option>
  <option value="6">Šesto pitanje?</option>
  <option value="7">Sedmo pitanje?</option>
  <option value="8">Osmo pitanje?</option>
  <option value="9">Deveto pitanje?</option>
  <option value="10">Deseto pitanje?</option>
</select>

<p><input type="text" style="font-size:20px;padding-left:20px;border:solid 1px black;height:40px;width:80%;max-width:500px;border-radius:20px;" id="pitanje_text" onchange="change2(this)"/></p>

为什么<!DOCTYPE html> 会导致这种情况，我应该删除它还是有更好的解决方案？谢谢！

【问题讨论】：

尝试将 meyer web reset css 添加到您的页面，然后查看是否仍然出现
据我所见，照片一模一样，只是剪裁不同。
@SujitAgarwal 还是一样，只是去掉了选项和文本框之间的空格
@TorjescuSergiu - 如果您观察，选择框下方的文本框会稍宽
doctype 是向网络浏览器指示页面编写的 HTML 版本的说明。我认为它不会对字体渲染产生任何影响

标签： css html

【解决方案1】：

将下面的代码添加到您的下部输入中，以在元素的总宽度和高度中包含填充和边框。这应该可以解决它。

box-sizing: border-box;

【讨论】：

感谢它完美运行！
不客气！