html - 为什么 html 中的内联输入标记会对宽度和高度属性做出反应？

Question

为什么这里两个输入标签都有我在css文件中提到的宽度和高度？他们都应该忽略它作为inline元素

<input class="submit" type="submit" value="Send">
<input class="reset" type="reset" value="Clear">

input
{
    width: 200px;
    height: 40px;
    background-color: lightgreen;
}

标签： htmlcss

Answer 1

正如您所提到的，输入被列为内联元素（https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#list_of_inline_elements），但浏览器有自己的样式表，称为用户代理样式表，用于设置它们的呈现 HTML 时有自己的默认值。

如果你检查铬：https ://chromium.googlesource.com/chromium/src/third_party/+/refs/heads/main/blink/renderer/core/html/resources/html.css#408 ，你会看到他们正在设置的第 419input, textarea, select, button行display: inline-block;。

每个浏览器都有自己的用户代理样式表，如果您检查浏览器开发人员工具，请滚动浏览 css 规则以获取输入。你最终会找到我上面提到的规则。