Topic: Spans (Page 1 of 1)

As far as I know, Divs are almost identical to Spans except they default to having the max width, and they are block elements.

However I'm finding adding padding and margins to spans isn't working, is there some reason why the span element doesn't except this?

Am I right in believing this?


Ok, let me give a bit more detail

ul.headLinks {

  width: 200px;

  height: 26px;

  padding: 0px;

  margin: 0px;

  border-left: 1px solid #ffffff;

}



li.inline {

  display: inline;

  padding: 5px 10px 0px 10px;

  border-right: 1px dotted #cccccc;

}



li.last {

  display: inline;

  padding: 5px 10px 0px 10px;

  border-right: 0px;

  }

This seems ok to me, here's the HTML

<ul class="headLinks">

  <li class="inline"><a href="#" class="headLinksText">Home</a></li>

  <li class="inline"><a href="#" class="headLinksText">Pictures</a></li>

  <li class="last"><a href="#" class="headLinksText">About</a></li>

	</ul>

I got most of this code from A List Apart, when I run it the top padding doesn't come into effect, but the left and right does, any ideas what a solution might be?

Cheers,

Blaise

(Edited by Blaise on 05-07-2004 13:31)

I think the vertical padding on inline elements does not work the same as on block elements. Here is an article on Eric Meyer's website that, I believe, explains the situation.

There are two possiblities that you may wish to consider that will get you close to what you want.

Option 1: Add line-height to your rules for li.inline and li.last as this will increase the vertical dimension of the inline elements.
For example:

li.inline {

  display: inline;



  line-height: 35px;



  padding: 5px 10px 0px 10px;



  border-right: 1px dotted #cccccc;

}

Option 2: Don't make the li elements inline, leave them as block and float them instead.
For example:

li.inline {

  display: block;



  float: left;



  padding: 5px 10px 0px 10px;



  border-right: 1px dotted #cccccc;

}

Fiddle with either one of those and I think you'll get what you're looking for.

There are no spans in your code

The line-height method will work, but I usually go with the floating blocks for this type of application myself.

Thanks for the help guys, I've managed to get it working now with the above mentioned ideas.

I was going on about spans and inline elements because that was how I was trying to get it working originally, and in general I was confused about how they were supposed to work.

Ta

Blaise

I agree with DL-44. I'd go with option 2 as well. I only offered option 1 as an alternative since that directly addresses the shortcomings of the padding not working on inline elements.

But option 2 is probably your better bet.