SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    <span><p></p></span>?

    Dear SitePoint people,

    I had a problem with a small piece of code:

    Code:
    <span style="margin-top: 30px; display: block; width:100%; padding: 5 5 15 5;">
     <p>First Paragraph Content</p>  
     <p>Second Paragraph Content with a <a href="http://www.google.com" onclick="window.open(this.href); return false;">Pop up link</a></p> 
    </span>
    I validated it under XHTML Strict, and it came up with the following error message: Line 68, Column 4: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag.

    Sometimes I feel like a need a solicitor to explain to me what on earth the validator talks about. .

    Anyway, I managed to correct the problem by changing the span to a div. But I am wondering why the code caused a problem.

    As I understand the difference between a span and a div is that a div is block element and a span is an inline element. Also a DIV has the tedency to put some padding on the top and bottom of the element, this is why I naturally chose a span. Span is suppose to be completely clear. DIV's seem to be easier to align using text-align, span's don't like to align, not quite sure why that is.

    Any input would be most appreciated.

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Location
    Michigan, USA
    Posts
    434
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    p is a block element and those don't belong in an inline element. You can tell the div what to do with padding and everything else with css.
    - Robert

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can't put a block element inside an inline element.

    Some block elements (eg. <p>) can only contain inline elements while others (eg. <div>) may contain other block elements.

    The only difference between <span> and <div> is that one is inline and one is block. There is no default padding unless your CSS adds some.

    You align blocks by setting the margins on the block. You align the text inside a block using text-align. You can't align inline content because it is inline and therefore goes where ever it ends up in line with the rest of the inline content.

    If you're trying to align inline content then you don't understand what inline means since aligning something that you have specified should be in line with the surrounding content makes no more sense than asking why you can't display the alphabet with M on the front while defining that the letters should be in alphabetical order.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    I understand now, thanks for your help. I know it was something to do with block and inline elements. Thanks QMonkey and thanks felgall for your explanations.

  5. #5
    SitePoint Enthusiast Yiwu's Avatar
    Join Date
    Mar 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    felqall's answer is so good.


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
  •