使用<p>标签</p>

Question

据我所知，p标签会创建段落。但我经常会找到HTML代码，其中这些标签用于其他目的。例如，我在Codecademy练习中找到了它：

<div><p>Rex</p></div>

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

它会在此圈子的中心创建一个名为Rex的圆圈：http://jsfiddle.net/cvT6E。但Rex这个词不是段落，只是一个字！

当我尝试用p替换span代码时（对我来说似乎更合乎逻辑），它不起作用：http://jsfiddle.net/cvT6E/2/。为什么不呢？

最后，我想知道：

1）在示例中，p标签的使用是否在语义上正确？ 2）当p标签被span标签替换时，为什么单词不居中？

Answer 1

首先，请回想一下<p>是块级element。 Mozilla很好地说“它们最重要的特征是它们通常在元素之前和之后用换行符格式化（从而创建一个独立的内容块）。也就是说，它们占用了容器的宽度。”这解释了为什么<p>个中心和span没有。

此外，<p>用于段落，因此它更适合表示文本内容，因此保留了语义，您也可能认识到。我建议您在HTML中没有语义标记的情况下使用<span>，在您的情况下，使用<span>表示单词或文本块并不是坚持。

欣赏你可能会采用不同的心态来解决这个问题，尽管除非必要，否则我不会建议复杂化。观察如下所述的标记。

<p><span>text</span></p>

这基本上会给你相同的效果，即圈中“Rex”字的居中，因为<p>是一个块级元素，它可以作为<span>的容器。元件。因此，<span>将有效地继承<p>的属性 从文本垂直居中的事实可以看出这一点。

相反，<span>是一个内联元素，并将其视为一个石斑鱼，将元素捆绑在一起。同时，<div>是理想的容器。就个人而言，当我找不到合适的标记元素时，我使用<span>，当我不是<p>或其他人的特殊属性时。我喜欢<span>因为它的纯洁。

如果您严格要在该圈子中使用<span>并居中“Rex”，则可以执行此操作。最后两个属性基本上使您能够做到这一点，输出显示在下面的图像中。

div span {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
        display:inline-block; 
        vertical-align:middle
}

Answer 2

p通常用于显示段落，但由于其默认属性，它也可用于许多其他内容。在这种情况下，span将无效，因为span具有默认display:inline。

Answer 3

问题1主要是基于意见的，答案没有实际意义。

问题2有一个简单的答案：span元素根据定义是一个内联元素（带有display: inline），因此text-align属性不适用于它（即，对其渲染没有影响）。你可以解决这个问题。使用div代替span或将span与CSS声明display: block一起使用。