默认的 <div> 元素和默认的 <span> 元素在使用 display: block 时有何区别？
7个回答
37
对于 HTML 元素的有效性和语义有所不同，否则它们是相同的。
div和span都被定义为在 HTML 方面没有深层含义的通用容器。一个默认为块级元素，另一个默认为内联元素，因为其他几乎所有元素都可以分为这两个主要组。某些元素必须包含在被定义为块级元素的元素中。这与 CSS 的
display属性无关，而是与 HTML 语义有关：基本思想是内联元素始终是块级元素的子元素（如果您想一想，这是一种很好的做法）。现在，如果您使用
display:block的span，从 CSS 视角来看，它将与div完全相同。然而，从语义角度来看，如果您在span中嵌套块级元素，则会创建无效的 HTML，因为您将块级元素嵌套在内联元素中。
- Boldewyn
3
9
- 可以包含在 div 或 span 中的元素（例如，使 span 显示为块级元素并不允许您在其中放置表格）
- 当 CSS 不可用时的渲染效果
- Quentin
1
1+1！请记住，作为一条经验法则，不允许在内联元素（如<span>）中放置块元素（如<div>）。 - jwueller
7
默认为
（注意，还有一个不太知名的变体
display:inline;，而 <div> 默认为 display:block;
这是两者之间唯一的区别，因此如果您为 指定了 display:block;，它将像普通 div 一样工作，反之亦然。
display:inline; 使元素在文本体中流动，而 display:block; 使其像块一样运行（非常奇怪！）。（注意，还有一个不太知名的变体
display:inline-block;，它是两种方式之间的折衷。 <img> 标签默认设置为此设置）- Spudley
5
<span> 默认是内联元素。这意味着 <span> 元素在前后不会产生任何换行符，而且有些属性不能应用于内联元素，例如高度。
<div> 默认是块级元素。这意味着当渲染时，<div> 会在前后生成换行符。
您可以通过 display 属性将块级元素转换为内联元素，反之亦然。
请参阅 this 以了解所有 display 属性的说明。
- Nivas
2
通过display属性，您可以将块级元素转换为内联元素或反之。但是，正如其他答案所解释的那样，这并不完全正确 - display属性只会更改格式，而不会更改结构。因此，在其中放置表格仍将是无效的。 - sleske
能否请您解释一下您的这行代码：“display属性只会改变格式，而不会改变结构”。据我所知，
display: block会给它一个高度和宽度，使其具有类似矩形的结构。由于它有了结构，因此会影响其他附近的块级/结构性元素。 - b Tech3
一个带有
display:block 样式的 span 元素本质上变成了一个 div 元素。它会使元素的宽度拉伸以填充它所在的容器。- Tim S. Van Haren
2
你可以在这里找到显示CSS属性的定义。
正如此链接中所述，
正如此链接中所述，
block值表示：
默认情况下，此属性的值为该元素将生成一个块级框（元素前后都会有换行）
inline，其定义为：
该元素将生成一个内联框（元素前后不会有换行）。这是默认值。
- Romain Linsolas
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 3 使用display: block与锚标签
- 5 Span标签的display:inline在渲染时变成了display:block。
- 3 display: block; VS display: table;
- 14 设置 display: block !Important
- 36 在display:inline内部使用display:block
- 23 CSS: display:block; vs display:table;
- 142 display:inline与display:block的区别
- 4 一个带有display:block属性的div和一个span之间有什么区别？
- 14 display none和display block的区别
- 6 如何切换 display:none 和 display:block？
display: block的元素都会呈现相同的空白。我看到的效果似乎只出现在React中条件渲染span内容时使用width: fit-content的情况下。我将span的显示方式更改为div，它改变了布局，但我认为这是一种普遍的效果。抱歉。 - Logan Cundiff