<p>和<div>和有什么区别<span>？
它们可以互换使用吗？
因为我面临的问题是，对于<span>保证金不起作用，但对于<div>并且<p>它正在起作用..
问问题
64699 次
7 回答
63
p和div元素是块级元素，其中span是内联元素，因此跨度的边距不起作用。或者，您可以span使用 CSS 制作块级元素，display: block;或者span我更喜欢display: inline-block;
除此之外，这些元素具有特定的语义含义，div更适合用于具有不同嵌套元素的内容块，p用于段落，并且span只是一个空元素，因此请牢记 SEO，您需要使用正确的标签对于正确的事情，例如将文本包装在div元素内将比将其包装在p
于 2013-05-08T07:11:47.017 回答
22
A<p>应该包含文本段落，a<div>是使用分区来布局页面，a<span>允许标记的样式略有不同，例如在<p>
这就是它们应该如何在语义上使用，它们的样式如何使用CSS取决于你。
于 2013-05-08T07:11:56.387 回答
15
作为一名 Web 开发人员，我不禁觉得所有这些指南在 2015 年都具有令人难以置信的误导性。
当然，“p”标签曾经是为段落使用而设计的……但在我 100% 的应用程序、设计和日常一般开发中，我们遇到的只是“p”施加的限制“标签......它在今天的互联网上没有任何好处。
我会说是的，“p”是一个描述性元素，出于这个原因，如果这就是它所做的一切；“描述一些东西”，我会全力以赴......但它不只是描述内容，它直接改变了内容，虽然它本身已经是一个限制，但它还不是全部限制内容。当涉及到 Web 开发时，为什么任何头脑正常的人都会有目的地接受一个限制性的构建块，这超出了我的理解。从设计的角度来看，这没有意义。从结构的角度来看，它没有意义。从 DOM 操作 PERIOD 开始，它没有任何意义。
我们已经一起停止使用“p”标签，除非我们绝对被迫使用（例如客户端 word-press 发布实现，诸如此类的愚蠢事情）。没有任何借口可以解释为什么我们不能用有名的类和 ID 来描述几乎所有的东西，所以我们认为零理由不得不屈从于没有任何好处的“标准”，实际上阻碍了拼图的每一块. “p”标签对开发人员、最终用户和现代搜索引擎都没有帮助。简而言之......“p”标签在远程复杂的实现中几乎被弃用（并且有很好的理由），不要让这些标准的纳粹的评论控制你如何显示你的内容！
即使在这个以开发人员为核心的网站上，在它自己页面的最顶部也有一个小弹出式片段，可以使用“p”标签，因为它包含足够的文本来运行一秒钟行，但由于几乎无限多的原因而完全被捕获在 DIV（并且只有一个 div，而不是 div -> p）中......最重要的是，今天，“p”与从 DIV 创建的任何描述良好的块相比很糟糕，这也被描述为具有非常描述性的 id="blurb" 的段落“p”（此外......我说）。
来自 Stackoverflow：
<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
我说下来
<p>I suck</p>
万岁
<div class="p">I rock</div>
是的，我确实很欣赏我们当前的 Web 标准，并且诸如此类的东西仍然占有一席之地，甚至提供了使用某些现代浏览器执行您无法使用容器完成的操作的能力，但它只是这个特别是破碎的元素“p”，作为重组和现代化的 HTML 的一部分......应该被留在它所属的坟墓里......这是一代网络，其中段落甚至不再是段落......块从字面上改变......这只是过时和不切实际的。
于 2015-05-19T20:12:38.260 回答
10
正如其他人所回答的那样......div并且p是“块元素”（现在重新定义为Flow Content）并且span是“内联元素”（Phrasing Content）。是的，您可以更改这些元素的默认表示，但“流”与“块”以及“短语”与“内联”之间存在差异。
被分类为流内容的元素只能在预期流内容的地方使用，而被分类为短语内容的元素可以在预期有短语内容的地方使用。由于所有短语内容都是流内容，因此短语元素也可以用于任何需要流动内容的地方。规格提供了更详细的信息。
所有短语元素，例如strongand em，只能包含其他短语元素：例如，您不能将 atable放在 acite中。大多数流程内容，例如div和li可以包含所有类型的流程内容（以及短语内容），但也有一些例外：p、pre和是只能包含短语th的非短语流程内容（“块元素”）的示例内容（“内联元素”）。当然还有一些正常的元素限制，例如只允许包含某些元素。dltable
虽然div和p都是非短语流内容，但div可以包含其他流内容子项（包括更多divs 和ps）。另一方面，p可能只包含短语内容子项。这意味着您不能将 adiv放在 ap中，即使两者都是非短语流元素。
现在这是踢球者。这些语义规范与元素的显示方式无关。因此，如果你有一个divinside a span，即使你的 CSS 中有span {display: block;}and ，你也会得到一个验证错误。div {display: inline;}
于 2014-06-02T04:32:27.227 回答
5
<p>并且<div>默认是块元素。<span>是一个内联元素。
块元素在浏览器中以新行开始和结束，而内联元素则不然。“内联”表示它们是当前行的一部分。
在当今复杂的网页设计中，这些区别的目的不太明显，但如果您回想 HTML（这些标签的来源）的早期，文档基本上是带有图像的文本，区别会变得更加清晰。
无论哪种方式，使用 CSS，您基本上可以覆盖标签的任何属性。因此，如果您希望 a<span>表现得像 a<div>或 a<p>那么您需要做的就是添加：
span
{
display: block;
}
使用此代码，您将能够设置垂直边距和水平边距。
于 2013-05-08T07:11:58.517 回答
2
1) div 元素旨在描述数据的容器。div标签可以包含其他元素---div是块级
2)p元素旨在描述一段内容---para是Block Level
3）span元素通常用于一小块HTML。---span是Inline
4）块级元素从新行开始，行内元素不。
5）大多数浏览器在任意两个块级元素之间插入一个空行。例如：para 和 para 和 header 和 para 之间以及两个标题之间、段落和列表之间、列表和表格之间等会有空行
于 2017-06-25T03:45:45.703 回答
0
我更以为，p元素div是块级元素，对面span是内联元素。但是当您p在代码中编写时，它会占用顶部和底部的空间，但div行为却不是这样。在 JS fiddle 上查看这个实验：
于 2016-03-31T11:33:28.560 回答