SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    difference between div AND span

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Fluid transparent round corners - no images required</title>
    <style type="text/css">
    
    
    *{margin:0;padding:0}
    .inline-block{display:inline-block}
    .bdr3{border:2px solid #00f}
    .pdg5{padding:5px}
    .bdr15{border-radius:15px}
    
    .floatRight {float:right}
    
    .backgroundYellow{background:yellow}
    
    </style>
    </head>
    <body class="pdg5">
    
    <div style="background:yellow">
      <div class="inline-block bdr3 pdg5 bdr15">logo  9999</div>
      <div class="inline-block bdr3 pdg5 bdr15 floatRight">logIn 555</div>
    </div>
    
    
    </body>
    </html>
    I have the code above at dot.kr/x-test/layOut/divLogo.php .

    I tried to change <div> to <span> so that I made the code below at http://dot.kr/x-test/layOut/spanLogo.php .

    Code:
    <div style="background:yellow">
      <span class="inline-block bdr3 pdg5 bdr15">logo  9999</span>
      <span class="inline-block bdr3 pdg5 bdr15 floatRight">logIn 555</span>
    </div>
    I see there is no defference between them.
    What is the difference between them?
    If I put the rest code of each page, the difference between them will happen?
    What is the better choice between them?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    div are block level by default.
    span are inline.

    That is the only difference, they are nothing-elements only used as hooks for grouping or styling purposes.
    I generally only use spans if I need to style a section within a line of inline elements like paragraphs and images.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post
    [code]
    I see there is no defference between them.
    That's because you have used CSS to style then to be the same. Without CSS a span will not create a new line and its display is "inline" by default and therefore cannot take dimensions unless you change the display in some way (such as block,float or inline-block etc).

    Note that you cannot nest block elements inside inline elements so the choice of a span is usually applied to text/content that is usually contained within a larger context (such as an odd word in a paragraph).

    CSS doesn't care what most elements look like (form controls excluded) as you can always style then to suit. The more important question is "which tag is semantically correct to use in each situation ?". Don't confuse appearance with the structural semantics of html.

    In your example above you have two snippets of separate text so the choice is not clear cut and a case could be made for a span or a div but using a span will limit you later on should you wish to add structural html inside the span. Indeed looking at your example the left span seems to be a logo of some sorts and therefore should be a more structural html element. If the logo was the main logo of the page then I tend to use an h1 for that and use a p element for the login. If its just a general logo then I would use a p element for both. If you feel that you may add more data later to those elements (popups or more html elements) then both should most likely be divs.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •