将块级元素放在一个 元件

Question

I know that  is to be used specifically with inline elements. 我知道将专门用于内联元素。 But what if you change an inline element like  into a block-level element using { display:block } and contain it within a  ? 但是如果使用{ display:block } 这样的内联元素更改为块级元素并将其包含在呢？

ie. 即。

<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>

Is that just wrong in every sense of the word? 这个词的每个意义上都是错的吗？ I know it is not common (ie. most would question why I didn't just use a div) but it's a hypothetical situation. 我知道这不常见（即大多数人会质疑为什么我不只是使用div）但这是一个假设的情况。 It passes validation tests, but is it sloppy as all heck/bad practice? 它通过了验证测试，但它是不是很糟糕/糟糕的做法？ Would you scoff if you read that code? 如果你阅读那段代码，你会嗤之以鼻吗？

Answer 1

A span element is always a text/inline/phrase element in HTML, and the HTML syntax rules that restrict p element content to such elements relate to HTML only. span元素始终是HTML中的text / inline / phrase元素，将p元素内容限制为此类元素的HTML语法规则仅与HTML相关。 So they are not affected by CSS settings that may make a span a block element in the CSS (rendering) sense . 因此，它们不受CSS设置的影响，这可能使得span成为CSS（渲染）意义上的块元素。

In CSS, you can assign any defined value to the display property, no matter what the element is like. 在CSS中，无论元素是什么，您都可以将任何已定义的值分配给display属性。 CSS is ignorant of the meanings of elements as defined in HTML or other markup language specifications. CSS不知道HTML或其他标记语言规范中定义的元素的含义。

Thus, there is no formal objection. 因此，没有正式的反对意见。

Whether it is good style, or otherwise acceptable, is more complicated. 无论是好的风格，还是其他方面都可以接受，都比较复杂。 There does not seem to be any statement on this in specifications, but it is reasonable to say that you should not change basic rendering features elements in vain. 在规范中似乎没有任何关于此的陈述，但可以合理地说，您不应该徒劳地更改基本渲染功能元素。 For example, in normal conditions, you should not use span and then say display: block in CSS, when there is the more logical approach of using div . 例如，在正常情况下，当使用div逻辑方法更为合理时，不应使用span然后在CSS中使用display: block 。 One reason to this principle is that it keeps your document in a better shape in non-CSS rendering situations or when all or some of your style sheet is not applied. 这个原则的一个原因是它可以在非CSS渲染情况下或在未应用全部或部分样式表时使文档保持更好的形状。

On the other hand, you would not change display in vain if you have a text paragraph and you wish to render part of its content as a block, eg as a centered or indented line, possibly with a background color that stretches through the available width. 另一方面，如果你有一个文本段落并希望将其内容的一部分渲染为一个块，例如作为一条居中或缩进的线，可能会有一个延伸通过可用宽度的背景颜色，你就不会徒劳地改变display 。 You cannot use div inside p , so the more natural markup is not available. 你不能在p里面使用div ，所以更自然的标记不可用。

Since the example is not a real one, it is impossible to say whether it is OK to deploy this approach in your case. 由于该示例不是真实示例，因此无法确定在您的案例中部署此方法是否可行。

Answer 2

It's HTML5 valid and it's not that bad in certain situations eg 它的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>元素放在一个</span> <p> <span>元件</span>

问题描述

2 个解决方案

解决方案1
8 2013-09-21 13:30:03

解决方案2
-4 已采纳 2013-09-21 08:18:28

将块级<span>元素放在一个</span> <p> <span>元件</span>

问题描述

2 个解决方案

解决方案1 8 2013-09-21 13:30:03

解决方案2 -4 已采纳 2013-09-21 08:18:28

解决方案1
8 2013-09-21 13:30:03

解决方案2
-4 已采纳 2013-09-21 08:18:28