Hi how can I put more space between these
lines of text on this block, In other words the leading,
in text but for code. Link
I shouldnt use the br tag right? bad practice?
I was going to reply br tag. Where did you hear itās bad practice?
well, ive heard from here a couple of time in the past.
so what if I did it like this?:
<div id="landingInfo">
<h1>I understand that the outcome of your divorce can affect the rest of your life.</h1>
<p id="statement"><br>Did you know the average cost of a divorce in Pasadena, CA is $90,000? <br> Thatās $45,000 per āside.ā My divorce mediation will cost you less than 5% of that.</p>
<p id="statement2"><b><br>Call me for a free initial phone consultation at 626-710-4140.</b></p>
</div>
I cannot see anything wrong with it. Maybe just take your br tag outside of the b tag and maybe instead of b use strong as I have the suspicion it is better supported
The <br> tag is used mainly within a block element to force a line break. It is not meant to space out paragraphs. You should be using CSS for the presentation (or appearance) of your content. This means that you really should use the CSS property margin to add space between the paragraphs.
8 Likes
The
<br>element represents a line break.
This element must be used only for line breaks that are actually part of the content:
- poems
- addresses
4 Likes
[off-topic]
You should be using <strong>...</strong> rather than <b>...</b>.
[/off-topic]
3 Likes
Why not just use margins on the p tag?
e.g.
#landingInfo h1 + p{
margin-top:10px;
margin-bottom:10px
}
Youāve already set padding anyway so you could have just added padding top.
As others have said never use a break just to make space.
7 Likes
haha I knew itā¦
@Andres_Vaquero has a pretty good track record here.
We learn from our occasional mistakes, donāt we?
6 Likes
of course but I was just pointing out an issue I had in the past with <br> here
I was not trying to put him on blast about itā¦
Technology changes over time. 4 years ago, the break tag was even more frowned upon because some screen readers would not separate the characters at the end of the line with the break tag from the one at the beginning of the next lineā¦ the result was a long meaningless, unpronouncable word. Nowadays screen readers are smarter. Maybe that influenced your earlier learning. It did mine. 
4 Likes
Since youāre using an H1 tag, put margin-bottom on that.
Then set a reasonable margin also on the P tags, perhaps an equal amount of vertical margin on the top and bottom.
For the paragraph text itself wrapping on multiple lines, adjust line-height if you want more spacing between text lines within the same P block.
1 Like
That sounds like more the fault of the screen reader than the use of the <br> tag.
But I would agree that using the tag in this way is certainly bad practice.
In html the various tags generally have some semantic meaning. Here we are seeing <p> tags which mean a paragraph, and <br> tags which mean a break to a new line within some text.
A paragraph, being a block of text, naturally ends and starts on a new line, that is a given. So adding an extra line break is redundant and pointless. A <br> tag between <p>s makes no sense, because it is not within any block of text. The text ended with the closing </p> tag, and does not start until the next opening <p> tag.
What this is, is shoehorning an inappropriate tag into the html in order to influence the layout. Layout being the job of css, not html.
Itās almost as bad as <p> </p> 
CSS: margin/padding - top/bottom is the way to create vertical gaps between elements.
The <br> tag is used to mark the beginning of a new line within a block of text and does have its place, but itās not one that most of us will use commonly. It lends itself to things like song lyrics or poems, where each verse may be marked up as a paragraph, but lines within the verse are separated by <br>s.
Another common misuse of <br> in layout can be headings. You may see:-
<h1>The<br>
Best Thing Ever</h1>
A designer may determine that the title is more aesthetically pleasing with the line break, and may well be right about that. But again is using html to leverage layout which is the job of css. Semantically, how is āTheā separate from the rest of the line? (itās not)
So instead it may be more appropriate to use semantically inert tags to force the desired layout via css. Eg:-
<h1><span>The</span>
Best Thing Ever</h1>
With:-
h1 span { display: block }
3 Likes
wait why margins and not padding? arent we addressing the space within the div? not the outerā¦
I know with the small cms that I have develop that I like the <br> tag for I definitely didnāt feel like fiddling around with the <p> tag.
<p style="line-height:10%"> your text here </p>
This will work
It may do - I confess Iāve never tried percentage line-height - but inline styles are not a good idea unless absolutely necessary.
1 Like
In some cases margins or padding can achieve the same visual appearance but it all depends on context.
You asked for space between the p tags and the tags are separated essentially by margins. If you wanted space āinsideā the p tag then you would use padding. As there is no background to the p tag then the difference is not visually noticeable.
Also margins collapse but padding doesnāt so it all depends on context where you use them. Sometimes it just doesnāt matter.
3 Likes