1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make a space in HTML?

Discussion in 'Web Design' started by schrute, Jan 7, 2011.

  1. schrute

    schrute Regular Member

    Joined:
    Oct 14, 2010
    Messages:
    290
    Likes Received:
    16
    Instead of using " " to make a space. Is there another way to make a space by pixels? " " provides too big of a space, I need between two images (Adsense code and an image) and I need it to be slightly less.
     
  2. flaktrak

    flaktrak Power Member

    Joined:
    Mar 1, 2010
    Messages:
    522
    Likes Received:
    139
    Location:
    South!
    1 method is make an image 1 pixel by 1 pixel (or whatever size you want). make it transparent.
     
  3. upl8t

    upl8t Regular Member

    Joined:
    Apr 9, 2008
    Messages:
    475
    Likes Received:
    84
    Location:
    New Scotland
    Make a transparent(clear) 1 x 1 pixel gif in your favourite image program like photoshop and then size inline. You can set it to any width you want. The image size will be small and download almost instantly.
     
  4. tacopalypse

    tacopalypse Executive VIP Jr. VIP Premium Member

    Joined:
    Nov 30, 2009
    Messages:
    980
    Likes Received:
    2,485
    Home Page:
    put the image inside a div, then use either the padding or the margin attribute to adjust the div's border size.

    use padding-left, margin-left, etc if you just want to add spacing on one side
     
  5. 12lolwut12

    12lolwut12 Junior Member

    Joined:
    May 26, 2010
    Messages:
    135
    Likes Received:
    10
    Location:
    The Netherlands
    Use this code for your image

    Code:
    <img src="image.jpg" style="margin-left: 2px;">
     
    • Thanks Thanks x 4
  6. Maxius

    Maxius Junior Member

    Joined:
    Aug 20, 2009
    Messages:
    109
    Likes Received:
    4
    Occupation:
    Student, IM
    Location:
    Lithuania
    Thanks, helped me to.
     
  7. Orbit143

    Orbit143 Senior Member

    Joined:
    Aug 8, 2010
    Messages:
    893
    Likes Received:
    588
    Location:
    /home
    Hi guys,
    this is crazy, creating and image only to make a gap? what about this:

    PHP:
    <html>
    <
    body>
    lol<span style="margin-left: 20px;">rofl
    </body>
    </
    html>
    Tested it and it works.
     
  8. gerulis

    gerulis Newbie

    Joined:
    Jun 18, 2009
    Messages:
    18
    Likes Received:
    2
    Occupation:
    Programmer
    Location:
    Lithuania
    Home Page:

    you should always end your opened tags

    PHP:
    <html>
    <
    body>
    lol<span style="margin-left: 20px;">rofl</span>
    </
    body>
    </
    html>
     
    • Thanks Thanks x 1
  9. Orbit143

    Orbit143 Senior Member

    Joined:
    Aug 8, 2010
    Messages:
    893
    Likes Received:
    588
    Location:
    /home
    Ya, sorry, I just forgot it.
     
  10. schrute

    schrute Regular Member

    Joined:
    Oct 14, 2010
    Messages:
    290
    Likes Received:
    16
    I forgot about this post.

    Yeah I found that to be a solution. Does anyone know can I use <span> to change the background between <span> and </span> as well?
     
  11. Orbit143

    Orbit143 Senior Member

    Joined:
    Aug 8, 2010
    Messages:
    893
    Likes Received:
    588
    Location:
    /home
    Here you go:
    PHP:
    <html>
    <
    body>
    lol<span style="border-left:20px solid red;"></span>rofl
    </body>
    </
    html>

    But this might not be what you wanted, span is only 1 line high. Maybe you could use div instead, but its not line element.
     
  12. blanko

    blanko Power Member

    Joined:
    Mar 16, 2008
    Messages:
    588
    Likes Received:
    125
    CSS is your friend
     
  13. gerulis

    gerulis Newbie

    Joined:
    Jun 18, 2009
    Messages:
    18
    Likes Received:
    2
    Occupation:
    Programmer
    Location:
    Lithuania
    Home Page:
    PHP:
    <html
    <
    body
    lol<span style="margin-left: 20px;background: #ff0000;">rofl</span
    </
    body
    </
    html
    for red background.
     
  14. erroronline14

    erroronline14 Regular Member

    Joined:
    Oct 16, 2009
    Messages:
    321
    Likes Received:
    922
    Margins or paddings should work fine. Or put a fixed width span.
     
  15. perfectpoint

    perfectpoint Junior Member

    Joined:
    Sep 21, 2010
    Messages:
    130
    Likes Received:
    27
    You can use nbsp only otherwise take a dreamweaver and keep space or set blank image there with your background color
     
  16. Mr. Legend

    Mr. Legend Junior Member

    Joined:
    Aug 28, 2010
    Messages:
    105
    Likes Received:
    10
    Make a table and keep cellpadding or cellspacing otherwise whats the harm in using   ?
     
  17. Samlko

    Samlko Newbie

    Joined:
    May 28, 2009
    Messages:
    11
    Likes Received:
    0
    Using Image to create a space is not a good way of approaching from SEO point of view as image makes a webpage heavier so we should try to avoid as much image as possible instead CSS is the solution of all such problems... good luck :)
     
  18. cherryberry

    cherryberry Junior Member

    Joined:
    Jul 12, 2011
    Messages:
    102
    Likes Received:
    2
    Thanks, I too was looking for this, it really worked.
     
  19. avondezyn

    avondezyn Junior Member

    Joined:
    Apr 15, 2011
    Messages:
    180
    Likes Received:
    3
    hey Great solution. I love it :) BHW is the best place to learn awesome tricks :)