SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    723
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    After <div> tags how do I make space?

    After <div class="container1">TEXT</div> tags, how can I make space under it rather than </br></br></br></br> etc?

    Thanks

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the stylesheet so that .container1 has a padding-bottom or margin-bottom. Alternatively add the style to the tag. For example:
    <div class="container1" style="margin-bottom: 3em;">

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Just as a side note, you probably want to enclose your text within paragraph elements, that could be why your not getting spacing if your just dumping all your text and using br's with no wrapping (apart from div) around them, div is not a suitable element for text on it's own as it has no inherent semantic value.

  4. #4
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    Change the stylesheet so that .container1 has a padding-bottom or margin-bottom. Alternatively add the style to the tag. For example:
    <div class="container1" style="margin-bottom: 3em;">
    Using ems is not good practice, ems are a relative size not a defined size. In other words that space on one computer could be completely different on another.

    I would just use margin-bottom:15px;

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Using px i9s probably even less appropriate than using ems. At least with ems the space remains proportional to the text whereas 15px is a gap of several lines when 1em is only 5px and is an almost non-existant space if 1em = 100px.
    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="^$">

  6. #6
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't mean 15px as literal they could put whatever they want. Also 1 em is not 5px, 1em is equal to the current font size. If the user has a different default font or font size the space would be completely different.

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always use relative rather than absolute sizes, as felgall says they maintain the proportions. A gap of 5px might look right at 12pt but be too big at 8pt and too small at 18pt. Relative sizes are recommended by the Web Accessiblity Guildlines (WAI) partly because they adapt to display on other devices better.

    I agree with AlexDawson that appropriate mark up should be used, again this is something encourage by WAI. A paragraph tag, <p>, would seem to be more appropriate in this case.

    There is a behaviour in browsers which I believe is called "margin collapsing", where if one paragraph has a bottom margin and the next paragraph has a top margin then the gap between them becomes the larger of the two margin. I wonder if this might be ChrisjChrisj's problem.

  8. #8
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always use em's when possible, but when your in a tight space (maybe a defined area in the design) I use pixels so that I can count on differences in browsers not breaking my layout.

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    After <div class="container1">TEXT</div> tags, how can I make space under it rather than </br></br></br></br> etc?

    Thanks
    Code HTML4Strict:
    <div class="section">
        <h2>News</h2>
        <p>....</p>
    </div>
    Code CSS:
    .section { margin: 0 0 1em }
    http://www.w3.org/TR/CSS2/box.html

  10. #10
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with alex, you could enclose them on paragraphs so they could have line spaces after each paragraph. You could also use “ .class-name {line-height:2em}” so that when you use it “<dic class=”class-name”>something in here</div>” it would leave a space after it.


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
  •