HTML Blank Space and line break

Blank Space Many times we have to use blank space in our html code to place objects or text in proper location. This is very simple in html. We will use in our menu system to achieve desire location.

Link1|Link2|Link3|link4


Now let us add one blank space   before and after each | to give some blank space.

Link1 | Link2  |  Link3 | link4


To add one more blank space we have to use   before and after the |  to place one more blank space. 

Link1 |  Link2   |   Link3  |  link4

Here is the code of the above line



Link1 |  Link2   |  
Link3  |  link4

See the use of     to get blank space.

By using padding

This line starts after some blank space at left, here is the code.

<span style="padding-left:20px">This line starts after some blank space at left</span>

To get a blank line break we can use <br> tag in html.

By using text-indent



<p style="text-indent: 4em;">
This line will be indented by 4em from left.<br>
This is next line
</p>

By using <pre> tag

The text within the pre html tag will retain all its line breaks and multiple space with indents if any. Read more <pre> tag on how to display text.

By using transparent Image

We can keep gap between by using one transparent gif ( or jpg ) image of one pixel width and one pixel height. By using this we can stretch the line and push the content to right of the image. Here is the code

Word 1<img src=dot.gif height=1 width=20> Word 2

In above code our image is of actually one pixel with and one pixel height image. Now there will be gap of 20 Pixel between two words.

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Bill Kisse

    18-01-2010

    Short, sweet and to the point. Just what I needed. Thank you!
    Ray Su

    20-01-2010

    i like men
    myspace uh

    27-01-2010

    thanks it works fine :)
    Selvi

    30-01-2010

    It's very nice and useful. Easy to understand. Thank You!
    Hansje

    04-02-2010

    nice, but what does nbsp mean?
    smo

    04-02-2010

    nbsp is non breaking space. Without line break browser should display this.
    siya

    04-02-2010

    Thanks .. this helped a lot
    Get on Google

    05-02-2010

    Just do a quick search, and I've found this page. Thanks for the code, I always forgot this one symbol.
    Colin D

    23-02-2010

    Thank you for this, this helped me make my lame excuse for a site's navigation bar look better :)
    Orion

    01-03-2010

    Thanks. What i have been looking for. :)
    Plada

    31-03-2010

    Thats really helpfull, thanks. But I still have a question.
    Carlos Castillo

    01-06-2010

    Be careful when using multiple   - Some browsers will ignore more than one   and will only display one empty space no matter how many   you've defined in your code. To get consistent results (and valid code) use CSS instead and define 'padding' and/or 'margin' for your elements.
    Billie Carrington

    21-06-2010

    Just like Bill said. Short, sweet and to the point
    Smiles

    17-06-2011

    Thank you so much! I used this code to decorate my page with pictures by positioning and aligning pictures. It looks perfect now. You rock!!
    Phani

    10-03-2012

    This helps me a lot ,very useful
    Afsana

    30-06-2012

    Thanks. it works!
    LazarusStr

    07-02-2013

    It worked, I could kiss you! Thank you so much!
    Aditya Mishra

    09-03-2013

    &nbsp--------- what is the meaing of &.
    M Hamidi

    22-06-2013

    Excellent???? Very Helpful
    fran

    03-09-2013

    great help, simply put,
    thanks a bunch..
    Jamie jabra

    24-04-2014

    Thats amazong thank you!
    JUNIX

    19-07-2014

    THANK YOU
    Anwar Khan

    12-09-2014

    How can we add extra spaces between text?
    Aravindhan

    02-12-2014

    Right on Target......:-)
    ehsan

    08-04-2015

    thank alllot

    10-04-2021

    thank you

    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer