SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to put space between div ?

    I have this code..


    <div style="width:800px; margin:0 auto;">
    <div><label for="reference number">Reference Number</label><span style="display:bloc;margin-left:200px">1234</span></div>
    <div><label for="NIC number">Driving License No</label><span style="display:bloc;margin-left:85px">89765432</span></div>
    </div>


    I want to put a space between these two red div in the display.

    How to put space between div ?

  2. #2
    SitePoint Addict Kakarot720's Avatar
    Join Date
    Feb 2001
    Location
    Washington DC
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the margin property.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kakarot720 View Post
    Use the margin property.
    I put stye="margin-top: 50px;" in the second div. It does not impact.

    What is the workaround ?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by windowsxp View Post
    I put stye="margin-top: 50px;" in the second div. It does not impact.

    What is the workaround ?
    There is no workaround. Where did you put it?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <title>vertical margin</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1165664-How-to-put-space-between-div
    Thread: How to put space between div ?
    2013.08.22 12:17
    windowsxp
    -->
    </head>
    <body>
    
    <div style="width:800px; margin:0 auto;">
        <div>
            <label for="reference number">Reference Number</label>
            <span style="display:inline-block;margin-left:200px">1234</span>
        </div>
        <div style="margin-top:50px;">
            <label for="NIC number">Driving License No</label>
            <span style="display:inline-block;margin-left:85px;">89765432</span>
        </div>
    </div>
    
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you were looking to put some space around both those divs as a whole then add padding to the main wrapper as a margin on the second div will collapse onto the wrapper and move the wrapper not the second div.

    Code:
    <div style="width:800px; margin:0 auto;padding:20px 0;">
    <div><label  etc..


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
  •