设置内联元素的高度和宽度答案

【问题标题】：Setting height and width of an inline element [duplicate]设置内联元素的高度和宽度
【发布时间】：2018-11-05 15:12:30
【问题描述】：

我有两个按钮（显示设置为内联），为它们设置了高度和宽度。我的印象是您只能设置块或内联块元素的高度和宽度。如果是这样，为什么它仍然允许我设置内联元素的高度和宽度？

例如here.

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

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

【问题讨论】：

实际上，width 可以，但height 不行。
根据 Chrome 计算的值是 inline-block
@BenM 宽度和高度都有效....我只是想知道为什么它有效...我认为宽度和高度仅适用于块元素。因为内联它被忽略了......但这里似乎并非如此......
代码运行良好...
@TemaniAfif - 除了 <button> 不符合替换元素的标准，无论是根据 CSS 2.2 还是 HTML5，因为它的 contents 可以通过 CSS 明确设置样式.按钮很奇怪，因为从display-outside 的角度来看，它们的行为确实就像被替换的元素，但从display-inside 的角度来看，它们是subject to CSS styling。

标签： html css

【解决方案1】：

“它有效”并不是一个完全正确的陈述。我没有看到您在 Mac 上使用 Chrome 69 提供的笔的高度。

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

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

至于为什么“它”（我假设您的意思是您的编辑器）允许您为内联元素添加高度，这是 HTML 和 CSS 的一个特性。只要格式正确，您就可以添加任何您想要的东西。然后由浏览器根据渲染引擎如何解释规范来渲染或忽略它。

【讨论】：