div和span标记之间的区别

Can anyone give me the difference between div and span tags?

谁能告诉我div和span标签的区别吗?

10 个解决方案

#1

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

div是块级，意思是它在自己的独立行上。span是内联的，所以它是另一个块级元素的子元素。

<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，您可以轻松地覆盖跨度和块级别的样式，但这不应该与您最初的标记和结构有任何关系。

#2

The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML 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和div之间的区别在于，span元素是in-line的，通常用于小块的in-line HTML，而div (division)元素则是block-line(基本上相当于在它之前和之后有一个换行符)，用于对更大的代码块进行分组。

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

div and 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，尤其是span不应该经常使用。只要有合适的选择，就应该用。例如，如果你想强调单词“crazy”和class“paper”的粗体，那么代码可能是这样的:

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

#3

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>

#4

Div ia a block element; spa - inline, so

Div ia a block element;温泉——内联

Div's places in separate lines; span's in one line
分列的分区位置;跨在一行
Div's has width, span's haven't
Div有宽度，span没有

#5

div is block element and span is inline element.

div是块元素，span是内联元素。

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.

块:新行出现在元素之前和之后，它使用可用的全部宽度。

More difference about inline/block, div and span

更多关于内联/块、div和span的差异

#6

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元素不能包含“复杂”元素，只能包含与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标签的其他用法。

#7

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文档中定义部门或部分。

#8

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:它像块一样工作，就像换行一样。Span:它像内联一样工作。例如:

** Div and Span Difference
Div Example

** Div和Span差异Div示例

What is Your Name?

My Name is Aruna Thakur

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

我叫Aruna Thakur Span你叫什么名字?

#9

div - it is a dom element with display property as a block that is element will take the whole row that is with the line-break.

div——它是一个带有display属性的dom元素，作为一个块，元素将使用换行符的整个行。

<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 display property inline that is without line-break.

span - dom元素的显示属性内联，没有换行。

<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

#10

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 clarity and access from 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中，和

(division)都是文档的结构元素。两者都可以使用嵌套的标记和属性，并且可以用于提供样式、语义清晰性和从动态代码或在导航域对象模型(DOM)时的访问。他们的不同在于他们的报道。一个保持了覆盖率，而

是块级别的。它们的通用性，以及之前可能缺乏的替代方案，导致这些流行的标签被过度使用。

Now HTML5 has 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有一些特定的标记，应该在和

中使用，包括

(forms)，，，，

，

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元素”。特别地，要查找节、分组上下文和表单。

#1