In any case, there is <hr> in the text without vertical space

Question

Anyway, there is text and then

<hr> 

Where

 <hr> 

Is the line directly below the text and has no vertical space between the text and the line?

Answer 1

 <styles> hr{ padding: 0px; margin: 0px; } </styles> 

Answer 2

Yes. Just slide it with css. Example:

 <p>text goes here</p> <hr style='margin-top:-1em' /> 

It will not have vertical space between them.

Answer 3

Sometimes I used a zero-height border div to give it a finer-grained formatting control; or show a horizontal rule that has a different look from the straight line <hr>.

Answer 4

hr , as a rule, it’s difficult to style browsers, as they use different properties, color , background-color , border , etc., to make parts of them,

however, if it only supports IE8 after that see this example

which has everything except the kitchen sink thrown at it, and yet it does not work in IE7

this makes it work in IE7 too:

 hr {margin: -7px 0 !ie7;} 

My method has always been to do the following (warning yukky of it, but provides a lot of styling options!):

 <div class="hr"><hr></div> 

with any styles needed for div.hr {styles} and .hr hr {display: none;}

this means that the actual hr will be displayed in browsers other than CSS / Text, and I can still erase the actual div with images or borders without thinking about the kitchen sink method in the JSFiddle example above;) YMMV though ..

Answer 5

here are some css examples for hr-Elements, as well as the eighth example, a decision on how to write text in the middle of a line without a break before and after it. This is the code:

HTML:

 <!-- Glyph, by Harry Roberts --> <hr class="style-eight"> 

CSS

 hr.style-eight { margin: 0 auto 24px; padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr.style-eight:after { content: "§"; display: inline-block; position: relative; top: -0.97em; font-size: 1.5em; padding: 0.25em; background: white;}