I am attempting to remove a line space between a paragraph and a list, and I found if I take the text out of the paragraph and just put it in the body, it works. I am insure if this is improper syntax or if there is a better way to do this.
Here is what I am doing as of now.
<!DOCTYPE html>
<html>
<body>
This is a list:
<ul>
<li>Element A</li>
</ul>
</body>
</html>
And that returns
This is a list
• Element A
But I am not sure if it is okay to be putting text outside of any kind of element, but this produces the results that I wanted. Is this okay to do?
It's perfectly valid (however your example is lacking <head> and <title> elements). Run it through https://validator.w3.org/ to see. You could also remove any margins, padding, or border on your paragraph element that could be causing the spacing as well.
Related
I've been trying to make a scroller for a website with some arrows on the side, but the arrows are going crazy and duplicating themselves in following sections. I've simplified the problem to the below - when I put one a-tag inside a section, where the a-tag is a colored shape thanks to some CSS, it produces a duplicate after the section ends. Here is some code below to try out:
<head>
<style>
a#block { height:30px; width:30px; display:block; background:blue; }
</style>
</head>
<body>
<section>
<a id="block"/>
</section>
</body>
I realise that the above looks like terrible use of mark up, but it's for a reason. The block is a simplification of an action arrow (hence the tag), and the section is necessary as there will be more inside of it.
I have no idea why this is happening, I never thought that HTML elements could duplicate. Any ideas?
<a id="block"/> is not valid HTML. <a> must have a closing tag: <a id="block"></a>.
Always validate your code when you get odd errors. It can be very enlightening.
I do know that HTML is insensitive to space. But what can I use to make empty spaces between words, or phrases. I have tried <p></p> such kind of tags, but the HTML automatically omit it.
Can somebody give me example codes?
You can use , aka a Non-Breaking Space.
It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this occupies.
This will give you the space you're looking for.
The "pre" tag defines preformatted text. It preserves both spaces and line breaks.
<!DOCTYPE html>
<html>
<body>
<pre>This paragraph will be pre-formatted.
I hope this helps!
All spaces will be shown as it is in the original file.
</pre>
</body>
</html>
As others already answered, $nbsp; will output no-break space character.
Here is w3 docs for   and others.
However there is other ways to do it and nowdays i would prefer using CSS stylesheets. There is also w3c tutorials for beginners.
With CSS you can do it like this:
<html>
<head>
<title>CSS test</title>
<style type="text/css">
p { word-spacing: 40px; }
</style>
</head>
<body>
<p>Hello World! Enough space between words, what do you think about it?</p>
</body>
</html>
Use white-space: pre:
<!DOCTYPE html>
<html>
<span style="white-space: pre"> My spaces </span>
<br>
<span> My spaces </span>
</html>
“Insensitive to space” is an oversimplification. A more accurate description is that consecutive whitespace characters (spaces, tabs, newlines) are equivalent to a single space, in normal content.
You make empty spaces between words using space characters: “hello world”. I you want more space, you should consider what you are doing, since in normal text content, that does not make sense. For spacing elements, use CSS margin properties.
To get useful example codes, you need to describe a specific problem, like markup and a description of desired rendering.
To add non-breaking space or real space to your text in html, you can use the character entity.
Either use literal non-breaking space symbol (yes, you can copy/paste it), HTML entity, or, if you're dealing with big pre-formatted block, use white-space CSS property.
If you are looking for paragraph indent then you can go for 'text-indent' declaration in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
p { text-indent: 50px; }
</style>
</head>
<body>
<p>This paragraph will be indented by 50px. I hope this helps! Only the first line will be indented.</p>
</body>
</html>
You can preserve white-space with white-space: pre CSS property which will preserve white-space inside an element. https://www.w3schools.com/cssref/pr_text_white-space.asp
After, or in-between your text, use the (non-breaking space) extended HTML character.
EG 1 :
This is an example paragraph. This is the next line.
If you want to leave blank space in HTML while editing the website just use <br /> and copy-paste it under the last one and keep going like that until you have enough space. Hope it helps.
I am new to CSS and learned a case from W3Schools(http://www.w3schools.com/css/tryit.asp?filename=trycss_float5). In this case, the <ul> element is floating, the <p> element next should surround it as I thought, but it starts from a new line instead. Why <p> doesn't surround floating <ul>? And, when I remove li{display:inline;} , it seemed no different shown in FireFox and Chrome. Can you explain this for me? Thanks.
Why shouldn't it? A <p> by definition starts a new paragraph, which implies a new line. You're asking "why is the door shut after I close it?"
Trying giving your p tag...
display:block; //maybe unnecessary
overflow:auto; //very important for containing floats
It's called nesting. Whatever is inside the <p> tag will be...well...inside it. if you write it like:
<p>
<ul>
//content
</ul>
</p>
Then your <ul> will be in the paragraph tag. and like marc said, paragraphs always start a new line by definition.
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line
The problem is that I have several "h2" tags that have a display:inline attribute, and on Microsoft's wonderful browsers the space between them doesn't appear. Is there a workaround?
I know there is a "non-breaking space" in HTML but I was wondering if one can make a space that may be a "breaking space".
--- edit ---
The website is http://newstoday.ro and the behaviour is in the footer. If the site is opened in IE the list is continuous, even though there is a space between the words. Please don't comment the rest of the code as I am just the plumber in this situation. Also there is a must for the headings as the client thinks it is better for SEO.
I can't think of a rationale for why you're wanting h2's to display inline. In fact, why would you want two headers to read together? Think of the way it should be read. Do you want it to read:
"Header one header two"
or:
"Header One"
"Header Two"
If it's the first way, then it's probably your HTML that's messed up. If it's the second, then you should probably think of it's positioning rather than changing it's behavior and utilize other css methods like float and position.
Have you tried setting the "margin" property? Not sure if that directly applies to your question.
Throwing an in there seems to create a space:
<html>
<head><title>Blah</title></head>
<body>
<h2 style="display:inline;">Something</h2>
<h2 style="display:inline;">Something Else</h2>
</body>
</html>
In this example, you actually end up with 2 spaces, so you might want to eliminate whitespace between the tags and the if you require only one space. Another option would be to add a left/right margin to the header element.
You can just use a regular space, but add "margin-right:_ px" to the h2 css definition to adjust the spacing between tags. Negative values are allowed too.
Apply the style margin: 0 0.5em to both headers - adjust 0.5 to suit (maybe 0.25 or 0.75 is better; also the first 0 is top/bottom margin, adjust as relevant).
Note: Since you want a character space, you want em not px as suggested earlier.
Complete example code...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Inline Header Example</title>
<style type="text/css">
h2
{
display: inline;
margin: 0 0.5em;
}
</style>
</head>
<body>
<h2>First Header</h2>
<h2>Second Header</h2>
</body>
</html>
Well the braking space is just a space, you know a " " without the quotes...
The answer is that it's not possible. You mean you want text that's in a larger block of text to flow just like the rest of it, as if the tag were < strong > instead of of < h2 >
Since h2 is a block level element no matter how you style it, some browsers (cough) will choke on your attempt to flow it inline with other text.