在文本和行中添加空格 <li> <a>元件</a>

Question

I've looked at various solutions in regards to this question, but they don't seem to apply.

This is my simple HTML code:

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="games.php">Games</a></li>
<li><a href="trivia.php">Trivia</a></li>
</ul>

How do I increase the space between the text and the line underneath it?

Answer 1

Use <br> or line-height css rules or simply do that to <li> css:

li
{ display:block;
  height:XXXX;
}

Answer 2

Add this to your css:

li {
    margin-bottom:5px;
}

Change 5px accordingly.

Answer 3

There are actually three or more ways.. here are the best three:

1. make
that will make a brake between them, like you just hitted enter key. 2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using

ul> li style="padding-top:10px;padding-bottom:10px;">Home

You know what I mean, I cant write it correctly, cause it will do ul in that post..

now , the third should be same as padding, but use "margin" instead