|
I wasn't going to bother with this, because it's fairly basic and this thread is more for "problems that people get stuck on".... but after mentioning the list styles, this should be covered.
7. margin/padding: top right bottom left
99% of the time, you'll see something like this:
#div {
padding: 5px;
}
What this does is adds 5 pixels of padding on top, right, bottom and left of the div. All around it!!
This is usually good enough, but not always. Sometimes we just want to put some padding to the left of it, to keep it from bumping into something else.
To do this, we have to specify what we want for each of the sides. And doing things in order is very important.
#div {
padding: 0px 0px 0px 5px;
}
This will put 0 pixels of padding on the top, the right and the bottom but it will put 5 pixels of padding on the left.
It's VERY IMPORTANT to keep it in that order... because the browser will, even if you don't.
So, going back to point 6 in this thread, if you want to indent your li elements inwards a few pixels, you would add this:
li {
margin: 0px 0px 0px 3px;
padding: 0px;
}
This will bump in each li element by 3 pixels. If they're too close vertically, you can add some underneath too.
li {
margin: 0px 0px 3px 3px;
padding: 0px;
}
It's pretty easy, but it's important to remember the order around the element.
Top, Right, Bottom, Left.
Keep that in mind and you can move things, or pad them, anywhere you want.
|