我在设计一些 Web 表单时遇到了麻烦。在我的情况下，表单从 body 元素继承了字体大小。在示例中，它设置为 form 只是为了说明问题。
有这两种形式:
<form>
<input type="text" />
<input type="submit" />
</form>
<form style="font-size:24px">
<input type="text" />
<input type="submit" />
</form>
人们会期望这些表单看起来相同，因为表单元素在两种情况下都具有相同的尺寸。但是，表单的高度以及输入文本和提交按钮之间的空间不同。有人可以解释发生了什么以及如何防止这种大小变化吗？ (我不喜欢将表单的字体大小设置为 0px)
最佳答案
如果您希望有更大的文本但又不想打扰您的任何元素，那么:
- 要么将所有内容扭曲成
<div style="position:relative;">或提供您的<body>position: relative;. - 然后将您的文本包装在
<div style="position: absolute;">中
这应该使您的文本“脱离流程”，这意味着文本的定位和调整大小不应影响任何未定位的内容或布局。此外，您可以使用 z-index 将您的文本“ float ”在非定位(或更通常称为“静态”)内容上。参见 here 详情
关于html - 表单的字体大小会改变表单的大小，即使元素的大小相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31810226/