放置块级别< span>元素在< p>元件 [英] Putting a block level <span> element inside a <p> element
问题描述
我知道< p> 是专门用于内联元素的。但是，如果使用 {display：block} 将内联元素（如< span> ）更改为块级元素>并将它包含在< p> ？
即
< html>
< head>
< style>
p {
background：red;
height：100px;
width：100px;
}
p span {
display：block;
背景：蓝色;
height：50px;
width：50px;
}
< / style>
< / head>
< body>
< p>
< span>我是比萨< / span>
< / p>
< / body>
< / html>
这在单词的每个意义上都是错误的吗？我知道这并不常见（即大多数人会质疑为什么我不使用div），但这是一个假设情况。它通过了验证测试，但是这是不是很糟糕？如果你阅读代码，你会嘲笑吗？
解决方案它是HTML5有效的，并且在某些情况下并不坏，例如
< p>
这是一些文字< span class =highlight>我是比萨< / span>这是更多的文字...
< / p>
.highlight {
background：yellow;
}
I know that <p> is to be used specifically with inline elements. But what if you change an inline element like <span> into a block-level element using { display:block } and contain it within a <p>?
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. It passes validation tests, but is it sloppy as all heck/bad practice? Would you scoff if you read that code?
It's HTML5 valid and it's not that bad in certain situations e.g.
<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>元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
