时间戳

首页 > 解决方案 > 了解内联元素？

html - 了解内联元素？

问题描述

请参阅下面的 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;
}

它似乎确实尊重顶部和底部边距，如下所示：

我的内联元素

为什么要尊重顶部和底部边距？这个问题似乎表明内联元素不应该尊重顶部和底部边距：为什么缺少顶部和底部边距？

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

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

标签： htmlcss

解决方案

从规范

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

input是一个替换的内联元素（https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements）

我想了解何时使用 adiv以及何时使用 aspan

没有通用规则，您需要知道的唯一规则是永远不要将block元素放入inline元素中。这将导致一些意想不到的和非直观的行为

推荐阅读