blocks|key|1109928|text|前面的代码是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1109929|<p+class='item'><span+class='name'>*Scrambled+eggs+on+crusty+Italian+ciabatta+and+bruschetta+tomato<span+class='price'>$12.50|code-block|syntax|javascript|1109930|所以我必须把它改成|1109931|<div+class='item'><span+class='name'>*Scrambled+eggs+on+crusty+Italian+ciabatta+and+bruschetta+tomato<span+class='price'>$12.50</div>|1109932|这是一个很容易解决的问题。上面代码的CSS是|1109933|.item+{
++++position:+relative;
++++border:+1px+solid+green;
++++height:+30px;
}

.item+.name+{
++++position:+absolute;
++++top:+0px;
++++left:+0px;
}

.item+.price+{
++++position:+absolute;
++++right:+0px;
++++bottom:+0px;
}|1109934|因此div标记可以包含其他元素。P不应该被强迫这样做。|1109935|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

The previous code was

<pre><code>&lt;p class='item'&gt;&lt;span class='name'&gt;*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato&lt;/span&gt;&lt;span class='price'&gt;$12.50&lt;/span&gt;&lt;/p&gt;
</code></pre>

So I have to changed it to

<pre><code>&lt;div class='item'&gt;&lt;span class='name'&gt;*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato&lt;/span&gt;&lt;span class='price'&gt;$12.50&lt;/span&gt;&lt;/div&gt;
</code></pre>

It was the easy fix. And the CSS for the above code is

<pre><code>.item {
 position: relative;
 border: 1px solid green;
 height: 30px;
}

.item .name {
 position: absolute;
 top: 0px;
 left: 0px;
}

.item .price {
 position: absolute;
 right: 0px;
 bottom: 0px;
}
</code></pre>

So div tag can contain other elements. P should not be forced to do that.

blocks|key|820602|text|答案都很好，但有一个我还没有提到的区别，那就是浏览器默认呈现它们的方式。主要的web浏览器将呈现一个在段落上方和下方都带有边距的标记。<div>标记将呈现为没有任何边距。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|820603|entityMap^0|1S|3|1Y|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

All good answers, but there's one difference I haven't seen mentioned yet, and that's how browsers render them by default. The major web browsers will render a <code>&lt;p&gt;</code> tag with margin above and below the paragraph. A <code>&lt;div&gt;</code> tag will be rendered without any margin at all.

blocks|key|1109746|text|表示一个段落，具有语义意义。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1109747|<div>仅仅是其他内容的块容器。|1109748|任何可以放在中的东西都可以放在<div>中，但反之亦然。<div>标记可以具有块级元素作为子元素。元素不能。|1109749|请看一下HTML+DTD。|1109750|1109751|blockquote|1109752|1109753|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/REC-html40/sgml/dtd.html^0|0|3|0|0|5|0|6|3|I|5|V|5|1G|3|0|4|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|L|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|M|3|-4|5|N|7|1H|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<code>&lt;p&gt;</code> indicates a paragraph and has semantic meaning.

<code>&lt;div&gt;</code> is simply a block container for other content.

Anything that can go in a <code>&lt;p&gt;</code> can go in a <code>&lt;div&gt;</code> but the reverse is not true. <code>&lt;div&gt;</code> tags can have block-level elements as children. <code>&lt;p&gt;</code> elements cannot.

Tae a look at the <a href="http://www.w3.org/TR/REC-html40/sgml/dtd.html" rel="noreferrer">HTML DTD</a>.

<blockquote>
<pre><code>&lt;!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;"&gt;
&lt;!ENTITY % block
 "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
 BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS"&gt;

&lt;!ENTITY % flow "%block; | %inline;"&gt;

&lt;!ELEMENT DIV - - (%flow;)* -- generic language/style container --&gt;
&lt;!ELEMENT P - O (%inline;)* -- paragraph --&gt;
</code></pre>
</blockquote>

blocks|key|2520221|text|这两个元素之间唯一的区别是语义。默认情况下，这两个元素都应用了CSS规则display:+block+(因此是块级的)；除此之外没有什么(除了在某些情况下有一些额外的边距)。然而，如前所述，它们在语义方面都有很大的不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2520222|顾名思义，元素用于段落。因此，当您想要创建段落文本块时，应该使用。|offset|length|style|CODE|2520223|然而，<div>元素在语义上几乎没有意义，因此可以用作通用的块级元素-最常见的是，人们在布局中使用它，因为它在语义上没有意义，通常可以用于您可能需要块级元素的任何事情。|2520224|Link+for+more+detail|2520225|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webdeveloper.com/forum/showthread.php?t=31421^0|0|5|3|Z|3|0|3|5|0|0|K|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

The only difference between the two elements is semantics. Both elements, by default, have the CSS rule display: block (hence block-level) applied to them; nothing more (except somewhat extra margin in some instances). However, as aforementioned, they both different greatly in terms of semantics. 

The <code>&lt;p&gt;</code> element, as its name somewhat implies, is for paragraphs. Thus, <code>&lt;p&gt;</code> should be used when you want to create blocks of paragraph text. 

The <code>&lt;div&gt;</code> element, however, has little to no meaning semantically and therefore can be used as a generic block-level element — most commonly, people use it within layouts because it is meaningless semantically and can be used for generally anything you might require a block-level element for. 

<a href="http://www.webdeveloper.com/forum/showthread.php?t=31421" rel="noreferrer">Link for more detail</a>

blocks|key|1109542|text|DIV是一个通用的块级容器，它可以包含任何其他块或内联元素，包括其他DIV元素，而P用于换行段落(文本)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1109543|entityMap|0|LINK|mutability|MUTABLE|url|http://www.htmlhelp.com/reference/html40/block/div.html|1|http://www.htmlhelp.com/reference/html40/block/p.html^0|0|3|0|15|1|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<a href="http://www.htmlhelp.com/reference/html40/block/div.html" rel="noreferrer">DIV</a> is a generic block level container that can contain any other block or inline elements, including other DIV elements, whereas <a href="http://www.htmlhelp.com/reference/html40/block/p.html" rel="noreferrer">P</a> is to wrap paragraphs (text).

blocks|key|820594|text|看看W3.org设计的标准可能会更好。这是地址：http://www.w3.org/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|820595|"DIV“标签可以包装"P”标签，而"P“标签不能包装"DIV”标签-到目前为止，我知道这一区别。可能还有更多的其他差异。|820596|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/^0|O|I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

It might be better to see the standard designed by W3.org. Here is the address: <a href="http://www.w3.org/" rel="noreferrer">http://www.w3.org/</a>

A "DIV" tag can wrap "P" tag whereas, a "P" tag can not wrap "DIV" tag-so far I know this difference. There may be more other differences.

blocks|key|2520030|text|可以将DIV看作一个分组元素。您将元素放在DIV元素中，以便可以设置它们的对齐方式|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2520031|而"p"仅仅是创建一个新的段落。|2520032|entityMap^0|3|3|0|1|3|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Think of <code>DIV</code> as a grouping element. You put elements in a DIV element so that you can set their alignments

Whereas <code>"p"</code> is simply to create a new paragraph.

blocks|key|821725|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821726|例如，你不会想要嵌套的s，因为这不会有太多的语义意义(除了引号的意义)，而人们使用嵌套的s来进行页面布局。|821727|根据Wikipedia的说法|offset|length|821728|821729|在超文本标记语言中，span和div元素用于文档的某些部分无法由其他超文本标记语言元素进行语义描述的情况。|blockquote|821730|821731|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Span_and_div^0|0|0|2|9|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|T|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|U|7|@]|8|@]|9|$]]|$1|C|3|D|4|5|6|V|7|@]|8|@$E|W|F|X|1|Y]]|9|$]]|$1|G|3|-4|4|5|6|Z|7|@]|8|@]|9|$]]|$1|H|3|I|4|J|6|10|7|@]|8|@]|9|$]]|$1|K|3|-4|4|5|6|11|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|12|7|@]|8|@]|9|$]]]|M|$N|$4|O|P|Q|9|$R|S]]]]

&lt;p&gt; represents a paragraph and &lt;div&gt; represents a 'division', I suppose the main difference is that divs are semantically 'meaningless', where as a &lt;p&gt; is supposed to represent something relating to the text itself. 

You wouldn't want to have nested &lt;p&gt;s for example, since that wouldn't make much semantic sense (except in the sense of quotations) Whereas people use nested &lt;div&gt;s for page layout. 

According to <a href="http://en.wikipedia.org/wiki/Span_and_div" rel="noreferrer">Wikipedia</a>

<blockquote>
 In HTML, the span and div elements are
 used where parts of a document cannot
 be semantically described by other
 HTML elements.
</blockquote>

blocks|key|2520145|text|在语义上用于文本，通常是段落。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2520146|<div>用于网页中的块或区域。例如，它可以用来制作标题的区域。|2520147|它们可能可以互换使用，但您不应该这样做。|2520148|entityMap^0|0|3|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<code>&lt;p&gt;</code> is semantically used for text, paragraphs usually.

<code>&lt;div&gt;</code> is used for a block or area in a webpage. For example it could be used to make the area of a header.

They could probably be used interchangeably, but you shouldn't.

blocks|key|821747|text|p标签用于段落，通常用于文本。div标签用于划分，通常用于创建文本部分。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|821748|entityMap^0|0|1|F|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

A <code>p</code> tag is for a paragraph, generally used for text. A <code>div</code> tag is for division, and generally used for creating sections of text.

blocks|key|2520358|text|除了已经给出的答案之外，还有一个主要区别：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2520359|2520360|div可以包含其他div+elements|unordered-list-item|offset|length|style|CODE|2520361|p不能包含另一个p元素|2520362|2520363|这意味着div可以堆叠，而p不能堆叠！|2520364|entityMap^0|0|0|0|3|9|3|0|0|1|8|1|0|0|4|3|D|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|S|8|@$F|T|G|U|H|I]|$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|X|8|@$F|Y|G|Z|H|I]|$F|10|G|11|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@$F|14|G|15|H|I]|$F|16|G|17|H|I]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|P|$]]

Besides the already given answer one major distinction:
<ul>
<li><code>div</code> can contain other <code>div</code> elements</li>
<li><code>p</code> cannot contain another <code>p</code> element</li>
</ul>
Which means that <code>div</code> can be stacked while <code>p</code> cannot!

What is the difference between &lt;p> and &lt;div>?

Can they be used interchangeably? What are the applications?

What is the difference between and <div>?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

和之间的区别是什么？它们可以互换使用吗？应用程序是什么？

问<p>和<div>有什么区别？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<p>和<div>有什么区别？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<p>和<div>有什么区别？
EN