Welcome to WebmasterWorld Guest from 50.19.34.234

Forum Moderators: not2easy

Message Too Old, No Replies

Margin, padding or spaces for BR tags

     

picophd

10:39 pm on Apr 19, 2012 (gmt 0)

10+ Year Member



I found it fairly challenging to find a solution for this problem about margin space after a BR tag, so I thought I'd share what worked perfectly for me, with an addon / extension like Stylish for Chrome / Firefox, for example, and I'm guessing that it could be useful for CSS programmers / scripters too.

Of course, feel free to enhance or tweak if you're an expert!


br
{ content: "A" !important;
display: block !important;
margin-bottom: 1.5em !important;
}

alt131

11:13 am on May 4, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi picophd, given the lack of suggested tweaks means the experts are away at the moment! I enjoyed the opportunity to remember the humble <br> can be styled, but a couple thoughts about the example posted.

Adding the content property is interesting - but note it applies to the :before/:after pseudo elements, plus <br> should be empty. So I was a bit surprised that Op11 rendered the content (but required display:block to implement the line break as well.) That said, after a quick test (ie8, winSaf5 and ff8) Op was the only version that did not respect a line-height and vertical align applied to the <br>, but only Op and ff applied margin-bottom.

What is the reason for trying to add a bottom-margin to a line-<br>eak? I'm asking because a line break just indicates where a line of text should break. If the desired outcome is to increase the vertical distance between lines of text then why not do so using line-height (plus vertical-align if required)?

g1smd

11:52 am on May 4, 2012 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Very often when people need a bigger line break, the content should have been broken into two separate paragraphs.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month