What is the difference between <p>, <div> and <span>?
，
Can they be used interchangeably?
它们可以互换使用吗?
Because I am facing problem that, for <span> margin not working but for the <div> and <p> it's working..
因为我面临的问题是，对于边界不起作用，但是对于
，它是有效的。
7 个解决方案
#1
32
p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;
p和div元素是块级元素，其中span是一个内联元素，因此span的边界不会起作用。或者，您可以通过使用CSS display: block来使您的跨块级别元素。或者我更喜欢显示:inline-block;
Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
除此之外,这些元素有特定的语义,div更好的被称为块的内容有不同的嵌套元素p用于段落,并跨不过是一个空元素,因此记住SEO,你需要使用正确的正确标记,例如包装语义文本的div元素将低于包装它在一个p
#2
14
A <p> should contain paragraghs of text, a <div> is to layout your page using divisions and a <span> allows markup to be styled slightly different, for example within a <p>
一个
应该包含文本的段落，一个
中。
This is how they should be used semantically, the styling of them however using CSS is up to you.
这就是他们应该如何使用语义，但是使用CSS的样式是由你自己决定的。
#3
7
As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
正如其他人所回答的，div和p是“块元素”(现在重新定义为流内容)和span是“inline element”(语法内容)。是的，您可以更改这些元素的默认表示，但是“流”与“块”、“语法”和“内联”之间有区别。
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
一个被分类为流内容的元素只能在预期的流内容中使用，而被分类为短语内容的元素可以在预期的内容中使用。由于所有的语法内容都是流内容，所以也可以在预期的任何地方使用一个短语元素。规范提供了更详细的信息。
All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.
所有的语法元素，例如strong和em，只能包含其他的语法元素:例如，不能在引用中放置一个表。大多数流内容(如div和li)都可以包含所有类型的流内容(以及语法内容)，但是也有一些例外:p、pre和th都是非语法流内容(“块元素”)的例子，它们只能包含语法内容(“内联元素”)。当然，也有一些常规的元素限制，比如dl和table只允许包含某些元素。
While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.
虽然div和p都是非语法流内容，但是div可以包含其他流内容的子元素(包括更多的div和ps)。另一方面，p可能只包含了儿童的措词。这意味着你不能把一个div放入一个p中，即使这两种都是非语法流元素。
Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.
现在意外的是。这些语义规范与元素的显示方式无关。因此，如果在一个span中有一个div，即使您有span {display: block;}和div {display: inline;}在CSS中，也会得到验证错误。
#4
6
As a web developer, I can't help but feel all these guidelines are incredibly misleading in the year 2015.
作为一名web开发人员，我不禁感到所有这些指导方针在2015年都非常具有误导性。
Sure, a "p" tag was at one point designed for paragraph use... but in 100% of my applications, designs, and just day-to-day general development, we've encountered nothing but limitations imposed by the "p" tag... it offers no benefit in today's internet.
当然，一个“p”标签是为段落使用设计的……但是，在我100%的应用程序、设计和日常的一般开发中，我们只遇到了“p”标签强加的限制……它对今天的互联网没有任何好处。
I would say yes, "p" is a descriptive element, and for that reason if that's all it did; "describe something", I'd be all for it... but it DOESN'T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn't all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn't make sense. From a structural standpoint it doesn't make sense. From any from of DOM manipulation PERIOD, it doesn't make sense.
我会说是，p是一个描述性元素，因为这个原因，如果是这样的话;“描述某事”，我完全赞成……但它并不仅仅描述内容，它直接改变内容，虽然它本身已经是一个限制，但并不是所有的内容，它也限制了内容。当涉及到web开发的时候，为什么头脑正常的人会有意识地接受一个限制的构建块。从设计的角度来看，这是没有意义的。从结构的角度来看，这是没有道理的。从任何一个DOM操作期间，都没有意义。
We've all-together stopped using the "p" tag except where we are absolutely forced to (client word-press post implementations, silly things like that, for example). There is no excuse as to why we can't describe nearly everything with well-named classes and ID's, so we see zero reason to have to bow to "standards" that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The "p" tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell... "p" tag is all but deprecated in even remotely complicated implementations (and with very good reason), don't let the comments of these standard's nazi's control how you display your content!
我们已经完全停止使用“p”标签，除非我们绝对*(例如，客户端文字新闻发布的实现，诸如此类的愚蠢的事情)。没有任何理由可以解释为什么我们不能用命名良好的类和ID来描述几乎所有的东西，所以我们认为没有理由不得不向“标准”屈服，而这些“标准”并没有带来任何好处，实际上阻碍了所有的难题。“p”标签对开发人员、最终用户和现代搜索引擎都没有帮助。总而言之……“p”标签几乎是不赞成的，即使是在非常复杂的实现中(而且有很好的理由)，不要让这些标准的纳粹控制的评论如何显示你的内容!
Even on this very site, a site oriented towards developers at it's core, has at the VERY TOP of it's own page a little pop-in piece that could have used a "p" tag as it contains enough text to run around to a second line, but is entirely captured in a DIV (and only a div, not a div -> p) for a nearly infinite number of reasons... foremost being that today, "p" SUCKS compared to any well described block created from DIVs, that is as-well-described (moreso... I say) as a paragraph "p" with the very descriptive id="blurb".
即使在这个网站,网站面向开发者的核心,具有它自己的页面的顶端一块小突然出现,可以用一个“p”的标签,因为它包含足够的文本运行在第二行,但完全是在一个DIV(且仅一个DIV,不是一个DIV - > p)几乎无限数量的原因……最重要的是，“p”与从div中创建的任何一个描述良好的块相比，都很糟糕(moreso…我说)作为一段“p”，带有非常描述性的id="blurb"。
From *:
从*:
<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
I say down with
我说了
<p>I suck</p>
and long live
和万岁
<div class="p">I rock</div>
And yes, I do appreciate our current web standards, and things like still have their place, even offering up abilities to do things with some modern browsers you can't accomplish with a container, but it's just that this one in particular, the broken element "p", as a piece of a restructured and modernized HTML... should have been left in the grave where it belongs... this is a generation of web where paragraphs aren't even paragraphs forever anymore... the blocks literally change... it's just plain outdated and impractical.
是的,我欣赏我们当前的web标准,之类的还有他们的地方,甚至提供能力做事情和一些现代浏览器你不能完成一个容器,但这只是一个特别的,破碎的元素“p”,作为重组和现代化的HTML的一块…应该留在坟墓里……这是一个网络时代，段落甚至不再是段落了……块从字面上改变……这太过时了，不切实际。
#5
3
<p> and <div> are block elements by default. <span> is an inline element.
和
Block elements start and end with a new line in the browser while inline elements do not. "Inline" means they are part of the current line.
块元素在浏览器中以新行开始和结束，而内联元素则不。“内联”表示它们是当前行的一部分。
With today's complex web designs the purpose of these distinctions are less obvious but if you think back to the early days of HTML (where these tags come from) where documents were basically embellished text with images, the distinction becomes clearer.
在今天复杂的网页设计中，这些区别的目的不太明显，但如果你回想一下HTML的早期(这些标签来自哪里)，文档基本上是用图像装饰文本，那么区别就更清楚了。
Either way, with CSS you can override basically any property of a tag. So if you want a <span> to behave like a <div> or a <p> then all you need to do is add:
无论哪种方式，CSS都可以覆盖标签的任何属性。所以如果你想要一个像
，那么你需要做的就是添加:
span
{
display: block;
}
With this code, you will be able to set the vertical margins as well as the horizontal ones.
使用这段代码，您将能够设置垂直的边距和水平边距。
#6
0
I more thought that,p and div elements are block level element on the other side, span is an inline element. but when you write p in your code it will take space top and bottom but div behavior not like that. Check out this experiment on JS fiddle:
我更想的是，p和div元素在另一边是块级元素，span是一个内联元素。但是当你在你的代码中写p时，它会占据空间的顶部和底部，但是div的行为不是这样的。看看这个关于JS小提琴的实验:
https://jsfiddle.net/arifkarim/9wcef1c3/
https://jsfiddle.net/arifkarim/9wcef1c3/
#7
0
1) div element is designed to describe a container of data. div tag can contain other elements---div is Block Level
1)div元素是用来描述数据容器的。div标签可以包含其他元素---div是块级别。
2)p element is designed to describe a paragraph of content---para is Block Level
p元素的设计目的是描述一段内容——para是块级。
3)span element Usually used for a small chunk of HTML.---span is Inline
3)span元素通常用于一小块HTML。——可内联
4)block-level elements begin on new lines, inline elements do not.
4)块级元素开始于新行，内联元素没有。
5)Most browsers insert a blank line between any two block-level elements. Ex: There will be blank line between para and para and header and para and between two headers,between a paragraph and a list, between a list and a table, etc
大多数浏览器在任何两个块级元素之间插入空白行。例:在para和para和header和para之间，在两个header之间，在一个段落和一个列表之间，在一个列表和一个表之间会有空白行。
#1
32
p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;
p和div元素是块级元素，其中span是一个内联元素，因此span的边界不会起作用。或者，您可以通过使用CSS display: block来使您的跨块级别元素。或者我更喜欢显示:inline-block;
Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
除此之外,这些元素有特定的语义,div更好的被称为块的内容有不同的嵌套元素p用于段落,并跨不过是一个空元素,因此记住SEO,你需要使用正确的正确标记,例如包装语义文本的div元素将低于包装它在一个p
#2
14
A <p> should contain paragraghs of text, a <div> is to layout your page using divisions and a <span> allows markup to be styled slightly different, for example within a <p>
一个
应该包含文本的段落，一个
中。
This is how they should be used semantically, the styling of them however using CSS is up to you.
这就是他们应该如何使用语义，但是使用CSS的样式是由你自己决定的。
#3
7
As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
正如其他人所回答的，div和p是“块元素”(现在重新定义为流内容)和span是“inline element”(语法内容)。是的，您可以更改这些元素的默认表示，但是“流”与“块”、“语法”和“内联”之间有区别。
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
一个被分类为流内容的元素只能在预期的流内容中使用，而被分类为短语内容的元素可以在预期的内容中使用。由于所有的语法内容都是流内容，所以也可以在预期的任何地方使用一个短语元素。规范提供了更详细的信息。
All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.
所有的语法元素，例如strong和em，只能包含其他的语法元素:例如，不能在引用中放置一个表。大多数流内容(如div和li)都可以包含所有类型的流内容(以及语法内容)，但是也有一些例外:p、pre和th都是非语法流内容(“块元素”)的例子，它们只能包含语法内容(“内联元素”)。当然，也有一些常规的元素限制，比如dl和table只允许包含某些元素。
While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.
虽然div和p都是非语法流内容，但是div可以包含其他流内容的子元素(包括更多的div和ps)。另一方面，p可能只包含了儿童的措词。这意味着你不能把一个div放入一个p中，即使这两种都是非语法流元素。
Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.
现在意外的是。这些语义规范与元素的显示方式无关。因此，如果在一个span中有一个div，即使您有span {display: block;}和div {display: inline;}在CSS中，也会得到验证错误。
#4
6
As a web developer, I can't help but feel all these guidelines are incredibly misleading in the year 2015.
作为一名web开发人员，我不禁感到所有这些指导方针在2015年都非常具有误导性。
Sure, a "p" tag was at one point designed for paragraph use... but in 100% of my applications, designs, and just day-to-day general development, we've encountered nothing but limitations imposed by the "p" tag... it offers no benefit in today's internet.
当然，一个“p”标签是为段落使用设计的……但是，在我100%的应用程序、设计和日常的一般开发中，我们只遇到了“p”标签强加的限制……它对今天的互联网没有任何好处。
I would say yes, "p" is a descriptive element, and for that reason if that's all it did; "describe something", I'd be all for it... but it DOESN'T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn't all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn't make sense. From a structural standpoint it doesn't make sense. From any from of DOM manipulation PERIOD, it doesn't make sense.
我会说是，p是一个描述性元素，因为这个原因，如果是这样的话;“描述某事”，我完全赞成……但它并不仅仅描述内容，它直接改变内容，虽然它本身已经是一个限制，但并不是所有的内容，它也限制了内容。当涉及到web开发的时候，为什么头脑正常的人会有意识地接受一个限制的构建块。从设计的角度来看，这是没有意义的。从结构的角度来看，这是没有道理的。从任何一个DOM操作期间，都没有意义。
We've all-together stopped using the "p" tag except where we are absolutely forced to (client word-press post implementations, silly things like that, for example). There is no excuse as to why we can't describe nearly everything with well-named classes and ID's, so we see zero reason to have to bow to "standards" that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The "p" tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell... "p" tag is all but deprecated in even remotely complicated implementations (and with very good reason), don't let the comments of these standard's nazi's control how you display your content!
我们已经完全停止使用“p”标签，除非我们绝对*(例如，客户端文字新闻发布的实现，诸如此类的愚蠢的事情)。没有任何理由可以解释为什么我们不能用命名良好的类和ID来描述几乎所有的东西，所以我们认为没有理由不得不向“标准”屈服，而这些“标准”并没有带来任何好处，实际上阻碍了所有的难题。“p”标签对开发人员、最终用户和现代搜索引擎都没有帮助。总而言之……“p”标签几乎是不赞成的，即使是在非常复杂的实现中(而且有很好的理由)，不要让这些标准的纳粹控制的评论如何显示你的内容!
Even on this very site, a site oriented towards developers at it's core, has at the VERY TOP of it's own page a little pop-in piece that could have used a "p" tag as it contains enough text to run around to a second line, but is entirely captured in a DIV (and only a div, not a div -> p) for a nearly infinite number of reasons... foremost being that today, "p" SUCKS compared to any well described block created from DIVs, that is as-well-described (moreso... I say) as a paragraph "p" with the very descriptive id="blurb".
即使在这个网站,网站面向开发者的核心,具有它自己的页面的顶端一块小突然出现,可以用一个“p”的标签,因为它包含足够的文本运行在第二行,但完全是在一个DIV(且仅一个DIV,不是一个DIV - > p)几乎无限数量的原因……最重要的是，“p”与从div中创建的任何一个描述良好的块相比，都很糟糕(moreso…我说)作为一段“p”，带有非常描述性的id="blurb"。
From *:
从*:
<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
I say down with
我说了
<p>I suck</p>
and long live
和万岁
<div class="p">I rock</div>
And yes, I do appreciate our current web standards, and things like still have their place, even offering up abilities to do things with some modern browsers you can't accomplish with a container, but it's just that this one in particular, the broken element "p", as a piece of a restructured and modernized HTML... should have been left in the grave where it belongs... this is a generation of web where paragraphs aren't even paragraphs forever anymore... the blocks literally change... it's just plain outdated and impractical.
是的,我欣赏我们当前的web标准,之类的还有他们的地方,甚至提供能力做事情和一些现代浏览器你不能完成一个容器,但这只是一个特别的,破碎的元素“p”,作为重组和现代化的HTML的一块…应该留在坟墓里……这是一个网络时代，段落甚至不再是段落了……块从字面上改变……这太过时了，不切实际。
#5
3
<p> and <div> are block elements by default. <span> is an inline element.
和
Block elements start and end with a new line in the browser while inline elements do not. "Inline" means they are part of the current line.
块元素在浏览器中以新行开始和结束，而内联元素则不。“内联”表示它们是当前行的一部分。
With today's complex web designs the purpose of these distinctions are less obvious but if you think back to the early days of HTML (where these tags come from) where documents were basically embellished text with images, the distinction becomes clearer.
在今天复杂的网页设计中，这些区别的目的不太明显，但如果你回想一下HTML的早期(这些标签来自哪里)，文档基本上是用图像装饰文本，那么区别就更清楚了。
Either way, with CSS you can override basically any property of a tag. So if you want a <span> to behave like a <div> or a <p> then all you need to do is add:
无论哪种方式，CSS都可以覆盖标签的任何属性。所以如果你想要一个像
，那么你需要做的就是添加:
span
{
display: block;
}
With this code, you will be able to set the vertical margins as well as the horizontal ones.
使用这段代码，您将能够设置垂直的边距和水平边距。
#6
0
I more thought that,p and div elements are block level element on the other side, span is an inline element. but when you write p in your code it will take space top and bottom but div behavior not like that. Check out this experiment on JS fiddle:
我更想的是，p和div元素在另一边是块级元素，span是一个内联元素。但是当你在你的代码中写p时，它会占据空间的顶部和底部，但是div的行为不是这样的。看看这个关于JS小提琴的实验:
https://jsfiddle.net/arifkarim/9wcef1c3/
https://jsfiddle.net/arifkarim/9wcef1c3/
#7
0
1) div element is designed to describe a container of data. div tag can contain other elements---div is Block Level
1)div元素是用来描述数据容器的。div标签可以包含其他元素---div是块级别。
2)p element is designed to describe a paragraph of content---para is Block Level
p元素的设计目的是描述一段内容——para是块级。
3)span element Usually used for a small chunk of HTML.---span is Inline
3)span元素通常用于一小块HTML。——可内联
4)block-level elements begin on new lines, inline elements do not.
4)块级元素开始于新行，内联元素没有。
5)Most browsers insert a blank line between any two block-level elements. Ex: There will be blank line between para and para and header and para and between two headers,between a paragraph and a list, between a list and a table, etc
大多数浏览器在任何两个块级元素之间插入空白行。例:在para和para和header和para之间，在两个header之间，在一个段落和一个列表之间，在一个列表和一个表之间会有空白行。