返回首页

The difference between <span> and <div> tags

时间:2009-06-10 22:39来源:未知 作者:admin 点击:
span and div tags both allow a Web designer to style text and add other formatting attributes to their Web page. They are not interchangeable tags, though. div tags are block-level elements, whereas span tags are not. This article explains this, and o
  

<span> and <div> tags both allow a Web designer to style text and add other formatting attributes to their Web page. They are not interchangeable tags, though. <div> tags are block-level elements, whereas <span> tags are not. This article explains this, and other differences, between <span> and <div> tags.

Both <span> and <div> tags allow you to apply CSS styles

<span> and <div> tags are both fine for applying inline CSS formatting. Consider the following code:

<div style="color:#000000;font-weight:bold;font-size:14px">Here’s some text in between div tags</div>

The output of this code is the same as:

<span style="color:#000000;font-weight:bold;font-size:14px">Here’s some text in between span tags</span>

<div> tags are block elements that allow you to position elements contained within them

<div> tags are block elements. This means they can "hold" other HTML elements, and they can be positioned anywhere on the screen. For this reason, <div> tags can be used for replacing table-based Web designs.

<span> tags are NOT block elements

Unlike <div> tags, <span> tags cannot hold other HTML tags. They should only be used for inline styling of text. Consider the following code:

<span style="font-size:14px">
<p>This is some text sized at 14 pixels.</p>
</span>

This code will probably render OK in most browsers, but it is actually incorrect. Remember, since the <span> tag is not a block-level element, it cannot contain other HTML tags. The correct way to write this code would be:

<p><span style="font-size:14px">
This is some text sized at 14 pixels.
</span></p>

While this code is correct, it can be written more efficiently by removing the <span> tag altogether:

<p style="font-size:14px">
This is some text sized at 14 pixels.
</p>

<div> tags create line breaks, <span> tags do not

Since <div> tags are block elements, they create line breaks. This is the same effect as a <p> tag. <span> tags do not create line breaks, which makes them perfect for styling text in the middle of a sentence. Here’s an example of a <span> tag used to style text in the middle of a sentence. The same code using <div> instead of <span> would produce undesired results.

<p>It's snowing in the Northeast today. Some towns received as much as <span style="font-size:18px;font-style:italic;font-weight:bold;">6 inches</span> of snow.</p>

Summary of <span> vs. <div> tags

<span> tags are useful if you need to apply specific formatting styles to text in the middle of a sentence, or in one place on your Web page. They are far less powerful than <div> tags, though, as a <div> will allow you to create blocks of content (like table-based Web designs) and position elements on the screen.


图片1

顶一下
(1)
33.3%
踩一下
(2)
66.7%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
发布者资料
小朱 查看详细资料 发送留言 加为好友 用户等级:超级会员 注册时间:2008-11-18 17:11 最后登录:2013-12-24 23:12
推荐内容