CSS to add space between <li>

[Sonjaaa]

Last week I asked how to space <li>s with a blank line between each one. I was given this CSS code:

li {margin: 12px 0;}

I have since discovered that this code works too:

li {padding-bottom: 1em;}

What is the difference, and is one preferable?

If I have a global .css file for my whole site that defines a class, say li.spaceb for this purpose, then it means that if a specific web page I'm editing has lots of lists, then I have to add <li class="spaceb"> many, many times. Is there a quicker way of saying I want all <li>s to be class "spaceb" by default in this page only, and this class was referred to in an external css. And then a way to say that specific <li>s should go against this page's special default and actually use the normal <li> spacing rule instead of the extra space rule that was made the new default for this page?

Thanks!

[chreo]

There is a way to make a "global" li
In your CSS, you have these different types:

#li, which becomes <id="li"> in HTML (only once per page)

.li, which becomes <class="li">

BUT whatever you write in your CSS without . or # becomes the standard behaviour for that tag

li {
margin: 1em;} means all li will have a 1 em margin all around unless you say otherwise.
You can say otherwise by making only certain types of li:s different like this:

li a{
margin: 1.2em;} for all links

ol li {
margin: 1.2em;
color: #33bd66;} so all li:s in ordered lists are like this, but unordered lists stay the other way. The examples above become automatic behaviours.

you can also make classes for li:s in your specific divs:
#navcontainer ul li {
margin: 0.2;
color: #33bd66;} so any li in an ul in the navcontainer become like that.

It takes a bit of thinking to figure out what you need and how to express it. Someone who does really good things with CSS building blocks is this guy (http://www.cssplay.co.uk/boxes/snazzy.html) ; he made me understand that you can add classes! (view source, he has his css in the html)
Padding and margins are different things for Fx and IE, which makes it difficult to say which is best. They can cause problems with divs. Experiment.;)

[chreo]

I forgot to answer one of your questions: additional css-files can be used.
What you do is you have your normal CSS link and under that you put one more link to the CSS file where you have the new rules (only those things that you want to be different.) The second CSS supercedes the first for the same classes, id:s etc.
I use this for my float, margin, padding, height and width problems with IE.
<link href="text.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link rel="stylesheet" href="text_IE.css" type="text/css" /> <![endif]-->
but for you adding or changing stuff to all, you would write like this:
<link href="text.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="li.css" type="text/css" />
Did this help you?

[VIPStephan]

li: a{
margin: 1.2em;} for all links
That looks like a typo. The colon is only for pseudo classes like :active or :first-child and the one you mean should rather read li a {...} (with just a white space)

To your first question:
The difference between margin and padding is that a margin creates space outside of an element and padding creates space inside an element.
The advantage of margin is that you can have negative margins which will drag the element in the specified direction. With a padding you can increase the dimensions of an element and the space for a potential background color/image whil a margin doesn't have the background color of the corresponding image for obvious reasons.

In your case it doesn't really matter if you use margin or padding (if the visible result is the same) and that's totally your choice.

Ah OK, I see you fixed things while I was posting... nevermind.
Also I think you are explaining it a little complicated, chreo, but I'm not feeling like writing more suggestions and adding to the confusion...

[chreo]

I didn't mean to be confusing, sometimes lenghtier answers can be better.

[VIPStephan]

Sure but in my studies I learned that for a student that is learning comletely new things too much information can confuse the him/her and it's sometimes better to leave out the info that isn't crucial for the solution of the current problem.
Sometimes less is more. ;)

[RexxCrow]

Good info, just a note ID's or #labelname may only be used once per page, though . or CLASS may be used a million-billion-trillion times if so desired. :cool:

[Fumigator]

I appreciate the long answer, actually. I need all the wisdom available :)

Along these lines, I have a question about this syntax, which I've seen in examples here and there:

div#header {...}

Does this mean only IDs named "header" that are div tags will use this CSS definition? So if I named an input tag (for example) id="header" then it would not use the CSS?

[Kravvitz]

div#header {...}

Does this mean only IDs named "header" that are div tags will use this CSS definition? So if I named an input tag (for example) id="header" then it would not use the CSS?
Correct. Just keep in mind that any ID may only apply to one element per page.