Question

我有两个按钮（显示设置为嵌入式），分别为它们设置了高度和宽度。我的印象是，您只能设置块或内联块元素的高度和宽度。在这种情况下，为什么仍然允许我设置内联元素的高度和宽度？

示例here。

input {
  display: inline;
  height: 50px;
  width: 200px;
}

<input type="button" value="click me">
<input type="button" value="click me2">

Answer 1

“有效”并不是完全正确的说法。在Mac上使用Chrome 69提供的笔中没有显示高度。

也就是说，我知道有些浏览器有时会尊重高度（经常在表单元素之类的特殊项目上），请尝试使用span示例。这不是CSS或浏览器的失败。

Display值旨在预测元素与周围其他元素的交互方式，而不是元素本身的显示方式。块元素旨在比文本line-height占据更多的垂直空间，因此规范对于这些元素如何处理高度更加有意。

至于为什么“ it”（我想是您的编辑器）允许您向内联元素添加高度，这是HTML和CSS的功能。您可以添加任何想要的内容，只要其格式正确即可。然后，由浏览器根据渲染引擎如何解释规范来渲染或忽略它。