Search code examples
htmlcssmobile-safari

Decrease the vertical height between text and horizontal rule

I need to show a text with horizontal rule almost touching the text. that is the vertical height between the text and hr should be very less. This should be displayable in mobile safari browser.

http://pastie.org/1206301

Solution

  • Set the padding/margin to 0 of your hr: (note i put the HR inside the because you don't want all HR's assuming that style. You could also give the < hr/> it's own CSS class too.

    <html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
.new{vertical-align:text-bottom;}
.new hr{padding:0;margin:0;}

</style>
</head>

<body>
    <div class="new">
    test text
    <hr/>
    <div>

</body>
</html>