Hi there
I want to know is there any tags or element in pure HTML(not css) for horizontal spacing in element
Like for vertical spacinng we use “br”
“This is my text and I want this to be 2 tab seprated”
Thanks
you could & n b s p ;
no spaces
Errm, no.
For vertical spacing I use padding and margins
Try this CSS:
word-spacing: 2em;
The html element “pre” keeps the formatting:
"This is my text and I want this to be 2 . tab separated"
Try this:
<pre style="background-color:#ff9; color:#00f">
This is my text and I want this to be 2 <b style="word-space:2em"> </b>tab separated
This is my text and I want this to be 3 <b style="word-space:2em"> </b>tab separated
This is my text and I want this to be 4 <b style="word-space:2em"> </b>tab separated
</pre>
Update:
<pre style="background-color:#ff9; color:#00f">
This is my text and I want this to be 1 	tab separated
This is my text and I want this to be 2 		tab separated
This is my text and I want this to be 3 			tab separated
This is my text and I want this to be 4 				tab separated
This is my text and I want this to be 5 					tab separated
</pre>
Output:
This is my text and I want this to be 1 tab separated This is my text and I want this to be 2 tab separated This is my text and I want this to be 3 tab separated This is my text and I want this to be 4 tab separated This is my text and I want this to be 5 tab separated
He said no CSS…
Elements like PRE do come preconfigured with certain extra margin but that’s because every browser comes with default CSS styles. As far as I know, you have to use CSS
Edit: well, you can use or 	 but I don’t know that it is a good practice in HTML. Using white spaces, definately, it not a good practice to control horizontal position in any editing software (from Word to authoring like InDesing) at least
this text has 1 space
this text has 2 spaces
this text has 3 spaces
this text has 4 spaces
Html is about structure/content and horizontal spacing is more about presentation which is CSS’s job.
As mentioned above breaks(br) are not to be used just to make space either but as a logical line breaks in text as seen in poems, songs etc but not as ends to paragraphs.
There are times when a non breaking space is useful but generally if you are using more than one or two just to make space then you are probably doing something wrong.
It has 4 extra spaces but as you have a gap between the non breaking spaces then you actually have 8 extra spaces 
There are various spacing characters in HTML other than the non-breaking space:
The longest one that I’m aware of is the “em space”,  .
He is saying that represents more spaces than 4, because you have this sequence: space—nbsp—space—nbsp—space—nbsp—space—nbsp—space … which is nine spaces in all.
1 Like
lol ye I know…
How do you leave horizontal spaces between words when you speak to someone? HTML is content without any implications as to how it should look - since if it is spoken then there is nothing for it to look like. If you want to apply an appearance then don’t use HTML and use CSS instead as that is what defines appearancefor a specific copy of the content - others may apply different CSS so that it looks or sounds different.
2 Likes
Can you give me a simple example?
Can you give me a simple example?
Can you give me a simple example?
Can you give me a simple example?
(Pretending I can’t hear the part about “HTML only, no CSS”…)
The CSS style {white-space:pre-wrap} applied to a text element preserves spaces. Does not require additional HTML elements. It isn’t foolproof, though. Extra spaces between sentences wrap as a group and the continuation of the text might look unexpectedly odd.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{white-space:pre-wrap}</title>
<!--
http://www.sitepoint.com/community/t/horizontal-spacing-element-in-html/175991
vngx
Apr 30, 3:09 AM
-->
<style type="text/css">
p {
font-family:courier new, monospace;
white-space:pre-wrap;
}
</style>
</head>
<body>
<p>This is the first sentence. This is the second sentence.</p>
<p>This is the first sentence. This is the second sentence.</p>
<p>This is the first sentence. This is the second sentence.</p>
<p>This is the first (erp) sentence. This is the second sentence.</p>
<p>This is the first sentence. This is the second sentence.</p>
</body>
</html>
Other solutions require additional HTML elements and CSS or JavaScript.
It’s unusual for someone to actually want to use more HTML elements, especially when it is unnecessary
1 Like
I’m guilty of having used HTML elements for style myself, years ago before I knew better.
eg. using h tags to get a certain font size, series of br tags to get vertical spacing.
But non-semantic mark-up can cause accessibility issues.
Or to say what might grab more attention, Google may have more problems with non-semantic mark-up. Google sees content and tags, not CSS (last I knew)
So if SEO and accessibility issues are of no concern I suppose using tags the wrong way isn’t a problem.
Thanks to all
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.