Question

我知道<p>将专门用于内联元素。但是如果使用<span>将{ display:block }等内联元素更改为块级元素并将其包含在<p>中呢？

即

<html>
<head>
<style>

  p {
    background: red;
    height: 100px;
    width: 100px;
    }

  p span {
    display: block;
    background: blue;
    height: 50px;
    width: 50px;
    }

</style>
</head>

<body>

<p>
  <span>I am a pizza</span>
</p>

</body>
</html>

这个词在每个意义上都是错的吗？我知道这不常见（即大多数人会质疑为什么我不只是使用div）但这是一个假设的情况。它通过了验证测试，但它是不是很糟糕/糟糕的做法？如果你阅读那段代码，你会嗤之以鼻吗？

Answer 1

span元素始终是HTML中的text / inline / phrase元素，将p元素内容限制为此类元素的HTML语法规则仅与HTML相关。因此，它们不受CSS设置的影响，这些设置可能会使span成为CSS（渲染）意义上的块元素。

在CSS中，无论元素是什么，您都可以将任何已定义的值分配给display属性。 CSS不知道HTML或其他标记语言规范中定义的元素的含义。

因此，没有正式的反对意见。

无论是好的风格，还是其他方面都可以接受，都比较复杂。在规范中似乎没有任何关于此的陈述，但可以合理地说，您不应该徒劳地更改基本渲染功能元素。例如，在正常情况下，当使用span的逻辑方法更为合理时，您不应使用display: block然后在CSS中说div。这个原则的一个原因是它可以在非CSS渲染情况下或在未应用全部或部分样式表的情况下使文档保持更好的形状。

另一方面，如果您有文本段落，并且希望将其部分内容呈现为块，则不会徒劳地更改display 。作为居中或缩进的线，可能具有延伸通过可用宽度的背景颜色。您无法在div内使用p，因此无法获得更自然的标记。

由于该示例不是真实示例，因此无法确定在您的情况下部署此方法是否可行。

Answer 2

它的HTML5有效，在某些情况下并没有那么糟糕，例如

<p>
   This is some text <span class="highlight">I am a pizza</span> and this is some more text...
</p>

.highlight {
  background: yellow;
}

将块级<span>元素放在<p>元素</p> </span>中

2 个答案: