I have a <br> before and after an unordered list. The spacing of the <br>'s don't seem to be equal though. Please see https://jsfiddle.net/052620dm/ (the second <br> is bigger than the first). It looks like adding a br before the ul doesn't do anything. Changing the unordered list to another display fixes the issue but obviously makes it no longer an unordered list. Any advice? Thanks!
First: Don't use <br> for layouting, use CSS.
To your problem: The first <br> breaks the text to a new line. This means, that there is no spacing between the 'hi' and the <ul>, because the <ul> starts directly at the new line. The <ul> is a block element and automatically pushes the text after to a new line. Then, the 2nd <br> comes and breaks to a new line again. This creates the larger spacing.
hi
<br> // linebreak
<ul> // <ul> starts directly at this new line
<li>test</li>
</ul> // <ul> is a block element and pushes the element after to a newline
<br> // another new line is added (there comes your empty space from)
hi
Not sure why you would want to use a br before and after the list. Why not just set a margin?
If you need to use the br tags, wrap your text in p tags and you'll get the same spacing before and after the list.
Related
The text for the site that I'm working renders as paragraphs with internal lines separated by <br> tags. When a single line runs longer than the container div width and wraps, how can I indent the text that wraps?
I've tried using margin-left and text-indent on the <p> tag, but of course, that just indents everything after the first line of the paragraph, which is not what I'm after.
<p>
Assuming that a containing div width is 27 characters, this line would wrap after the word 'containing', meaning that I'd like indentation for any new line created by wrapping within this sentence.
<br>
Then the start of this line should be aligned with 'Assuming' above, and the following lines created by wrapping (if any) should also be indented.
</p>
I've read and visited a lot of websites, but none of them have provided me with a simple solution. What i want to know is what's the best way to add/skip a line in html? What I mostly use is two <br /> tags, but I know that there is a simpler solution to the problem. Is there a way to skip a line, using css, instead of doing this:
<p>Hello. <br /><br />This is a test</p>
You could simply use 2 separate paragraph (<p>) tags. For example:
<p>Hello.</p>
<p>This is a test</p>
Here's a demo.
Semantically, it depends on your purpose. Do whatever's best in the situation. Some examples.
If you literally need to skip a line, that is, have a empty line with nothing on it in your text, then by all means use two <br> elements.
This is one line of text<br>
This is also one line of text<br>
The next line happens to be empty<br>
<br>
And here is another line, not empty<br>
And so on.
However, if you want to create some blank space between two blocks of prose, then the two blocks should be paragraphs, as mentioned in the other answers.
And if the first part is a bunch of individual lines, but the second part is a piece of prose, only the second part needs to be a paragraph. No need to enclose the first part in <p> tags as well. Example:
Add the water to the recipe<br>
Add the salt<br>
<p>Note: stir thoroughly!</p>
If your intention is to actually separate two lines of text, to signify they don't belong together, you can use a <hr>. Make it invisible if you want.
This is some text
<hr style="opacity:0">
This is some unrelated text
If the next line happens to be an introduction to the later half of the text, change it into a <h4> (that is, a header at whatever level you require here).
The last line of the previous section
<h4>Introduction</h4>
The fist line of the next section
This works because headers also have margins built in.
Lastly, if you have an existing piece of html with your two blocks of text already in two HTML elements, you don't necessarily have to change the markup; all you need to do is set top and bottom margins for those elements in the CSS.
Suppose they are in <section>s:
<style>
section {margin:1em 0}
</style>
...
... The last line of the previous section</section>
<section>The fist line of the next section ...
You can surround the 'Hello' with div and add css of maring-bottom for example:
<p>
<div style='margin-bottom: 40px;'>Hello.</div>
This is a test
</p>
I think that using br tag is always a bad idea. Try using paragraphs, css padding, css margin, hr. Try avoiding br because it's not semantic and using the proper tag in your site "helps the search" engines to "understand your site"
<p>Hello. <br /> <br> This is a test</p>
Using block level elements would help. for example, p is a block level element which would give the line break.
so you can have the text in two paragraphs. and have the margin/padding set to the paragraph
using <br> is a bad approach.
Try using this where you want the blank space:
If you want multiple blank spaces, then repeat the code successively like this:
etc.
I'm not sure why, but there are two little dashes next to two of my tabs and they're shifting everything right. It's not effecting the third tab.
Here is a JSFiddle and images
`http://jsfiddle.net/michaelhorstman/wL0ubv50/`
Bro, in list style, there's no end anchor tag. try to add</a> in the each list end
looks like I was missing closing anchor tags on my list items in the header!
`<li> Hello </li>
<li> This </li>
<li> Test </li>`
Fixed it!
I am coding an MVC 5 view, and I am after some text colored green, the same as the class="text-success" Bootstrap class on the same line as normal text.
Here is what I have coded currently:
Test Text: <p class="text-success">Yes</p>
This however, displays the green "Yes" on the next line down rather than on the same line as the "Test Text:".
How can I display the text on one line?
That should do the trick :
<p>Test Text: <span class="text-success">Yes</span></p>
Explanation :
<p> is a block element, hence displaying in its block taking the whole width (if not specified otherwise in the CSS), with a new line before and after.
<span> is an inline element, taking only the width that's needed and not forcing any new line.
The difference between inline and block is a very important thing in HTML/CSS. You will also discover other values for the css display property, a very usefull one being inline-block that puts together some benefits of block and some others from inline.
You can use CSS to change the way <p> is displayed. The normal mode is block; changing to inline will prevent the line break.
p.text-success {
display: inline;
}
Test Text:
<p class="text-success">Yes</p>
The fix of this issue is simple: just use <span> instead of <p>:
Test Text: <span class="text-success">Yes</span>
The reason behind this is, that the the tag <p> is defined as paragraph and causes a line break automatically (if definition was not changed through CSS).
The <span> tag instead is a simple text span and does not cause a line break.
Additionally you can also add <nobr> around it, to force to browser to not make a line break (no br stands for no line break):
<nobr>Test Text: <span class="text-success">Yes</span></nobr>
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.