如果输入元素是内联元素,为什么可以调整它们的大小?

时间:2013-11-12 03:19:56

标签: html css

我的印象是内联元素无法调整其高度,但我可以使用<input type="text"/>元素执行此操作。

我是否更正<input type="text"/>元素是内联的?

如果是这样,那么是什么使它们与<span></span>元素的不同之处在于如何调整它们的大小。

3 个答案:

答案 0 :(得分:6)

input元素默认为inline-block,而不是inline

另一方面,span等元素默认为inline

width元素的height / inline-block,例如input可以更改(example).

虽然inline元素(例如span)默认情况下无法更改,因为其尺寸是由“在其中呈现的内容”定义的。 (example)

  

此[width]属性不适用于未替换的内联元素。未替换的内联元素框的内容宽度是在其中呈现的内容(在子项的任何相对偏移之前)的内容宽度。回想一下,内联框流入线框。线框的宽度由其包含块给出,但可能因浮动的存在而缩短。 - W3 reference

答案 1 :(得分:0)

默认情况下,它们会以内联块的形式呈现。这就是您可以指定宽度的原因。例如,您可以在chrome dev工具中看到这一点。

http://codepen.io/johannesjo/pen/BrcuE

答案 2 :(得分:0)

inlineinline-block之间存在差异。

您可以更改height的{​​{1}},同时无法更改inline-block元素。

所以我认为你所改变的东西可能是inline元素。

这是Fiddle给你的!