SQL PHP HTML ASP JavaScript articles and free scripts to download

HTML Blank Space and line break

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.
Google+
Bill Kisse18-01-2010
Short, sweet and to the point.
Just what I needed.

Thank you!
Ray Su20-01-2010
i like men
myspace uh27-01-2010
thanks it works fine :)
Selvi30-01-2010
It's very nice and useful.
Easy to understand.
Thank You!
Hansje04-02-2010
nice, but what does nbsp mean?
smo04-02-2010
nbsp is non breaking space. Without line break browser should display this.
siya04-02-2010
Thanks .. this helped a lot
Get on Google05-02-2010
Just do a quick search, and I've found this page. Thanks for the code, I always forgot this one symbol.
Colin D23-02-2010
Thank you for this, this helped me make my lame excuse for a site's navigation bar look better :)
Orion01-03-2010
Thanks. What i have been looking for. :)
Plada31-03-2010
Thats really helpfull, thanks.
But I still have a question.
Carlos Castillo01-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 Carrington21-06-2010
Just like Bill said. Short, sweet and to the point
Smiles17-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!!
Phani10-03-2012
This helps me a lot ,very useful
Afsana30-06-2012
Thanks. it works!
LazarusStr07-02-2013
It worked, I could kiss you! Thank you so much!
Aditya Mishra09-03-2013
 --------- what is the meaing of &.
M Hamidi22-06-2013
Excellent???? Very Helpful
fran03-09-2013
great help, simply put,

thanks a bunch..
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer