了解内联元素？答案

【问题标题】：Understanding inline elements?了解内联元素？
【发布时间】：2020-12-21 15:51:40
【问题描述】：

请看下面的 HTML：

  <!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<span class="child">
    <input type="text" name="submit" id="submit">
    <input type="text" name="search" id="search">   
</span>
</body>
</html>

以及下面的css：

#search
{
    display:inline;
    margin:100px;
}

它似乎确实尊重上下边距，如下所示：

为什么要尊重顶部和底部边距？这个问题似乎暗示内联元素不应该尊重顶部和底部边距：Why margin top and bottom is missing?

另外，我想了解何时使用 div 以及何时使用 span 并想出了这个：

如果元素组至少包含一个块级元素，则使用 DIV。这迎合了元素组包含块级元素和内联元素的场景，也迎合了元素组仅包含块级元素的场景。
如果元素组包含所有内联元素，则使用 SPAN。

【问题讨论】：

这个问题似乎暗示内联元素不应该尊重上下边距 --> 输入是替换的内联元素，限制适用于非替换的内联元素
相关：stackoverflow.com/q/55358492/8620333（宽度、高度也一样）

标签： html css

【解决方案1】：

来自the specification

这些属性对非替换内联元素没有影响。

input 是被替换的内联元素 (https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)

我想了解何时使用div 以及何时使用span

没有通用规则，您需要知道的唯一规则是永远不要将block 元素放入inline 元素中。 This will lead to some unexpected and non intuitive behavior

【讨论】：