Help with spacing in a table matrix

[Chrisj]

I'm using the html and css below.

The text seems to appear towards the bottom of the box (cell?).

How can I add just a little space below the text, so it appears more in the center

with even space all around it?

Thanks

 

<ul class="table" id="a">
<li><div>Type</div></li>
</ul>
<ul class="table" id="b">
<li><div>Number</div></li>
</ul>
<br>
<ul class="table" id="c">
<li><div>TEST</div></li>
</ul>
<ul class="table" id="d">
<li><div>HELLO</div></li>
</ul>

ul.table {

 

CSS:

ul.table {
				width:110px;
				margin: 0px 0 0 1px;
				float:left;
				clear:left
				list-style-type: none;
				padding:1;
			}
			ul.table li {
				height:1em;
				margin:0;
				padding:100;
				float:left;
				clear:left
			}
			ul.table li div{
				width: 100px;
				height: 200px;
				text-align:center;
				color:black;					
				font-color: #000000;
				font-size: 12px;
				padding:.2em .0em .2em .2em;
			}	
			ul.table li div:first-child {
				color:black;
				float:center;
				clear:none;
			}
			#a {
				border: 1px solid #000000;
				;
								}
			#b {
				border: 1px solid #000000;
				margin: 0px 8px 0px 0px;
								}
			#c {
				border: 1px solid #000000;
								}
			#d {
				border: 1px solid #000000;
				margin: 0px 8px 0px 0px;
								}

 

[haku]

First off, you should use paragraph tags instead of div tags, since the data inside is text, and not a division of the site. After you do that, you can play with the top and bottom padding of the p tag (since you will change it) and/or the line-height of the p tag, in order to position your text the way you want.

[Chrisj]

Thanks for your reply.

I can change the <div> to <p> and the </div> to </p>, but I don't know, by your reply, if I change anything in the css? If so, how/what, please?

Can you be more specific regarding "play with the top and bottom padding of the p tag (since you will change it) and/or the line-height of the p tag"? I'd appreciate it.

 

Thanks again

[haku]

So you change your div to p tags so it looks like this:

 

<li><p>Some text</p></li>

 

Though truth be told, you don't even really need the p tags in there for single words like you are using. Only if you are actually using paragraphs (since they are paragraph tags). If it's just a regular list, I would just use:

 

<li>Some Text</li>

 

If you use the first one (with the p tags), you can set the top and bottom paddings using this in your CSS:

 

li p
{
  padding-top:__px;
  padding-bottom:__px;
}

 

or if you use the second one, with no p tags, you can use this:

li
{
  padding-top:__px;
  padding-bottom:__px;
}

[Dorky]

yes and if you are not placing the words in different parts of the page you could use just

<ul>
<li>
Hello
</li>
<li>
World
</li>
<li>
Test
</li>
</ul>

instead of a ul for each word.