reducing the space between li's border and the text

Question

hi! :) i've the following code:

<ul>
<li style="border: 300 red dashed">hello</li>
</ul>

and get something like:

hello

---

i want to reduce the gap i.e, i want to collapse the border so that it touches the base of the word "hello".. was i clear? :) any help?

Answer 1

Simple:

<ul>
    <li style="border: 300 red dashed; padding-bottom:2px;">hello</li>
</ul>

Simply change 2px to be whatever you need.

Padding specifies the distance between the content and the border, it might be a benefit to look at the CSS box model, I have mine pinned to my wall for reference.

Answer 2

play with css padding

Update:

    <ul style="margin-bottom:0px;">
        <li style="border: 300 red dashed; ">hello</li>
     </ul>

Answer 3

Try the line-height property and fiddle with the percentage until you like it:

<ul>
  <li style="border: 1px red dashed; line-height:80%;">hello</li>
</ul>

Also, did you really want a 300px border?