Welcome Login

Css: Differences between div and span tags (and 'inline', 'block' and 'inline-block' elements)


Css

<div> tag:

1. is a 'block-level element'

2. can contain all other elements.

3. can only be inside other block-level elements.

4. defines a rectangular region on the page.

5. tries to be as wide as possible.

6. begins on a 'new line', and has an 'carriage return' at the end, like a <p> tag.

7. defines logical divisions (defined) in your web page.

8. divides the page up into larger sections, like a paragraph tag.

9. you can use the id and name attributes to name your sections.

Note. the id attribute shares the same name space as the name attribute when used for anchor names, so always use the same value for id and name if used together.

 

 

<span> tag:

1. is an 'inline element'.

2. cannot contain block-level elements.

3. can be inside any other element.

4. defines a 'snake' on the page.

5. tries to be as small as possible.

6. does not create any new lines.

7. use a span tag when you want to change the style of elements without placing them in a new block-level element in the document.

 

Eg: styling span tags:

If you had a  <h3> tag, that you wanted the second word to be red, you could surround that word with a span tag with red styling, and it would still be a part of the <h3> tag, just red.

<h3>This is the <span style="color : #f00;">secondword</span> of h3 heading</h3>

 

Outputs:

css-span1

 

Eg2:

<span class="dl">
Download Latest <a href="../Download/stuff.pdf" id="midCont_midRightCont_Stuff">Stuff</a>
</span>

span.dl {
    border: 1px solid #4E80B3;
    color: #000000 !important;
    float: right;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    padding: 5px;
}

 

 

Eg3: highlight text in html:

<span style="background-color: #FFFF33;" > highlighted text</span>

 

Outputs:

css-span2

 

 

 

Equivalents between div and span:

<div> tag is equivalent to <span style="display: block">

<span> tag is equivalent to <div style="display: inline">

 

Eg:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div style="width:350px;background-color:lightgray">

        <div style="background-color:yellow; border:1px solid red">div</div>
        making span equivalent to a div here:<br />
        <span style="display: block; background-color:lightyellow; border:1px solid red">div</span>
        <br /><br />

        <span style="background-color:green; border:1px solid red">span</span>
        making div equivalent to a span here:<br />
        <div style="display: inline; background-color:lightgreen; border:1px solid red">span</div>

    </div>
</body>
</html>

 

Outputs:

css-divspan1

 

 

 

Differences between css property values: 'block', 'inline' and 'inline-block':

Block element:

1. does not tolerate any html elements next to it.

2. forces a line break after the block element. A block element has some whitespace above and below it.

 

Inline element:

1. has no line break before or after it.

2. allows other elements to sit to their left and right, ie: it tolerates html elements next to it.

For more information, see here.

3. respects left and right margins and padding, but NOT top and bottom.

4. cannot have a width and height set.

 

Inline-block element:

'inline-block' is a hybrid that creates a rectangular region (a block), and doesn't create any new lines (hence 'in line'):

1. allows other elements to sit to their left and right. That is, it is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

2. respects top and bottom margins and padding.

3. respects height and width.

 

 

 

Example of block, inline and inline-block elements:

Eg:

css-divspan2

 

 

 

For more information, see here.


Created on: Friday, March 18, 2011 by Andrew Sin