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.
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
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.
Number of User Comments : 24
|Click for more Questions on HTML|
|Short, sweet and to the point.
Just what I needed.
|i like men|
|thanks it works fine :)|
|It's very nice and useful.
Easy to understand.
|nice, but what does nbsp mean?|
|nbsp is non breaking space. Without line break browser should display this. |
|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.|
|Thank you for this, this helped me make my lame excuse for a site's navigation bar look better :)|
|Thanks. What i have been looking for. :)|
|Thats really helpfull, thanks.
But I still have a question.
|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.|
|Just like Bill said. Short, sweet and to the point|
|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!! |
|This helps me a lot ,very useful|
|Thanks. it works!|
|It worked, I could kiss you! Thank you so much!|
| --------- what is the meaing of &.|
|Excellent???? Very Helpful|
|great help, simply put,|
thanks a bunch..
|Thats amazong thank you!|
|How can we add extra spaces between text?|
|Right on Target......:-)|