Html div 和 span 标签的区别

difference between div and span tag

提问by meder omuraliev

Can anyone give me the difference between divand spantags?

谁能告诉我div和span标签之间的区别？

回答by meder omuraliev

a divis a block level, meaning it's on its own separate line. a spanis inline, so it's a child of another block level element.

adiv是块级别，这意味着它在自己单独的行上。aspan是内联的，所以它是另一个块级元素的子元素。

<p><span>blah</span> <span>foo</span></p>

^ I can have multiple spans inside a block-level. They all show up on the same line.

^ 我可以在块级内有多个跨度。它们都出现在同一行上。

<div>foo</div><div>blah</div>

^ These divs will be on separate lines.

^ 这些 div 将在单独的行上。

With CSS though, you can easily override the styles for span and block levels, but that shouldn't have any bearing on your initial markup and structure.

尽管使用 CSS，您可以轻松覆盖跨度和块级别的样式，但这不应与您的初始标记和结构产生任何影响。

回答by Ramiz Uddin

The difference between spanand divis that a span element is in-lineand usually used for a small chunk of in-lineHTML whereas a div(division) element is block-line(which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

span和之间的区别在于，divspan 元素in-line通常用于一小块in-lineHTML，而div(division) 元素是block-line（基本上相当于在它之前和之后有一个换行符）并用于对较大的代码块进行分组.

<div id="scissors">
    <p>This is <span class="paper">crazy</span></p>
</div>

divand especially span shouldn't actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word 'crazy' and the class 'paper' is bold, then the code might look like this:

div尤其是跨度实际上不应该经常使用。只要有一个明智的选择应该被使用。例如，如果您想强调单词 'crazy' 并且类 'paper' is bold，那么代码可能如下所示：

<div id="scissors"> 
    <p>This is <strong class="paper">crazy</strong></p>
</div>

回答by sintaxi

Here is a demonstration...

这是一个演示...

#mydiv{
  display:inline;
}

#myspan{
  display:block;
}

<div id="mydiv">
  this div will behave just like a span
</div>

<span id="myspan">
  this span will behave just like a div
</span>

回答by demas

Div is a block element; span - inline, so

Div 是块元素；span - 内联，所以

• Div's places in separate lines; span's in one line
• Div's has width, span's haven't

• Div 的位置在不同的行中；跨度在一行中
• Div 有宽度，span 没有

回答by ArK

div is blockelement and span is inlineelement.

div 是block元素，span 是inline元素。

Inline: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.

Block: New lines appear before and after the element with it consuming the full width available.

Inline：这些元素不会在其放置之前或之后强制换行，并且只会占用必要的空间。

Block：在元素前后出现新行，并消耗可用的整个宽度。

More difference about inline/block, div and span

关于inline/block、div 和 span 的更多区别

回答by Shadow Wizard is Ear For You

I'll give simple answer, not going into block/inline technical stuff.

我会给出简单的答案，而不是进入块/内联技术内容。

Div element can contain other elements, including other Div.

Div 元素可以包含其他元素，包括其他 Div。

Span element can't contain "complex" elements, only text or things like <a>tag which are same "level" as the span, or technically speaking (sorry!) are inline as well.

Span 元素不能包含“复杂”元素，只有文本或<a>与 span 相同“级别”的标签之类的东西，或者从技术上讲（对不起！）也是内联的。

Div is used as "placeholder" in the page, for example to contain the whole Menu, then you can place it wherever you want using only CSS and apply same style to everything in the placeholder.

Div 在页面中用作“占位符”，例如包含整个菜单，然后您可以仅使用 CSS 将其放置在您想要的任何位置，并将相同的样式应用于占位符中的所有内容。

Span is used to style specific text, when you have text inside other text that you want to be in different font/color/size. Can't really think of any other usage for span tag.

Span 用于设置特定文本的样式，当您希望其他文本中的文本具有不同的字体/颜色/大小时。真的想不出 span 标签的任何其他用法。

回答by Technogsalad

The tag is used to group inline-elements in a document and this tag provides no visual change by itself. It provides a way to tag a hook to a part of text or document.

该标签用于对文档中的内联元素进行分组，并且该标签本身不提供视觉变化。它提供了一种将挂钩标记到文本或文档的一部分的方法。

The tag defines division or section in an HTML document.

该标签定义了 HTML 文档中的分区或节。

回答by Anu

Div: It is working like as a Block, equivalent to having a line-break. Span: It is working like as an inline. For Example :

Div：它就像一个块一样工作，相当于有一个换行符。跨度：它像内联一样工作。例如 ：

** Div and Span Difference
Div Example

** Div and Span Difference
Div 示例

你叫什么名字？

My Name is Aruna Thakur

Span ExampleWhat is Your Name : My Name is Aruna Thakur **`End Code'

我的名字是 Aruna Thakur

Span Example你叫什么名字：我的名字是 Aruna Thakur **`End Code'

回答by Sunil Garg

div- it is a dom element with displayproperty as a blockthat is element will take the whole row that is with the line-break.

div- 它是一个具有display属性的 dom 元素，因为block该元素将占据带有换行符的整行。

<div>Your website name?</div>
<div>http://www.array151.com</div>

will be displayed in two different rows. and each div will be considered as an individual block.

将显示在两个不同的行中。每个 div 将被视为一个单独的块。

Your website name?
http://www.array151.com

span- dom element with displayproperty inlinethat is without line-break.

span- 具有不带换行符display属性的dom 元素inline。

<span>Your website name?</span>
<span>http://www.array151.com</span>

the result will be on the same line because of the span

由于跨度，结果将在同一行上

Your website name?http://www.array151.com

回答by newmanicspree

In HTML, both <span>and <div>(division) are structural elements of a document. Both can have nested tags, attributes applied, and can be used to provide styling, semantic clarityand accessfrom dynamic code or when navigating the Domain Object Model (DOM). They're difference lies in their coverage. A <span>maintains coverage in-line, whereas a <div>is block-level. Their versatility, and perhaps previous lack of alternatives, leads these popular tags to overuse.

在HTML 中，<span>和<div>(division) 都是文档的结构元素。两者都可以具有嵌套的标签，属性应用，并可以用于提供定型，语义清晰度和访问从动态代码或导航域对象模型（DOM）时。它们的不同之处在于它们的覆盖范围。甲<span>维持覆盖范围的在线，而<div>是块级。它们的多功能性，也许以前缺乏替代品，导致这些流行的标签被过度使用。

Now HTML5has specific tags that should be used in place of <span>and <div>, including <fieldset>(forms), <legend>, <label>, <input>, <header>, <footer>, <caption>and <figure>, just to name a few. These new additions should be used in more specific scenarios they were designed for.

现在HTML5有特定的标签应该用来代替<span>and <div>，包括<fieldset>（表单）<legend>、<label>、<input>、<header>、<footer>、<caption>和<figure>，仅举几例。这些新增功能应该用于它们设计用于的更具体的场景中。

For more information, look at Section 4, "The elements of HTML", from W3C. In particular, look for the sections, grouping contexts and forms.

有关更多信息，请参阅W3C 的第 4 节“HTML 的元素” 。特别是，查找部分、分组上下文和表单。