We help IT Professionals succeed at work.

css space between text and underline

rgb192
rgb192 asked
on
css for
vertical space
between
text and underline
underneath text
Comment
Watch Question

Paul MacDonaldDirector, Information Systems

Commented:
I don't believe the underline is a separate element from the text itself so I don't think there's a way to do this.  
Commented:
.style {padding-bottom:10px}
JF0

Commented:
Note: this only works when you use the border-bottom css style to create an underline. Based on your previous question, I made this assumption.
line-height property:
you would put this in your stylesheet
p { line-height: 180%; }

This would go in your HTML body:
<p>anything between these tags would have the CSS line-height properties applied.</p>


Underline property:
you would put this in your stylesheet
.utext {text-decoration:underline}

This would go in your HTML body:
<div class="utext">anything between these tags would have the CSS line-height properties applied.</div>
line-height is the same as leading in desktop print. It will put vertical space between your lines of text.
For some of my projects i have changed the normal text underline with a border bottom like in the above users sujestions, so you would have something like this in your code to allow a css class for underline and the old html "u" underline.

<style type="text/css">

u, .underline {
      border-bottom: 1px solid #000;
      padding-bottom: 2px;
      text-decoration: none;
}

</style>

<p> a line of text with a <span class="underline">some</span> parts <u>underlined</u></p>
css for
vertical space : padding and margin's are the two options for giving vertical space.
padding-top, padding-bottom, margin-top, margin-bottom.
also u can give vertical-align: top, bottom, middle etc.
between : letter-spacing is the option.
text and underline : text-indent and text-decoration: underline;
underneath text : padding and margin-bottom is the option.

Author

Commented:
thanks