将块级&amp；lt；span&amp；元素放入&amp；lt；p&amp；元素中

2022-08-13 00:00:00 block inline html paragraph

我知道<p>将专门用于内联元素。但是，如果使用{ display:block }将类似<span>的内联元素更改为块级元素并将其包含在<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)，但这只是一种假设情况。它通过了验证测试，但它是不是像所有该死的/糟糕的做法一样草率？如果你读了那个代码，你会嗤之以鼻吗？

解决方案

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

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

.highlight {
  background: yellow;
}

相关文章