0

据我所知，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。但是雷克斯这个词不是一个段落，它只是一个词！

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

最后，我想知道：

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

4

3 回答 3

2

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

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

感谢您可能会以不同的心态处理此问题，尽管除非必要，否则我不建议将事情复杂化。观察如下所述的标记。

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

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

在此处输入图像描述

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

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

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

在此处输入图像描述

于 2014-06-11T18:11:33.277 回答
1

p通常用于显示段落，但由于其默认属性，它也可以用于许多其他事情。在这种情况下， span 将不起作用，因为 span 具有 default display:inline。

于 2014-06-11T18:04:26.103 回答
0

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

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

于 2014-06-11T18:31:04.533 回答