When you have multiple paragraphs and you use “padding-bottom” to space them out. What do you do when you don’t want the last paragraph to have padding?
Currently I just make a new class like .last{padding:0;}
But I haven’t seen this in other people’s code.
Another example would be for example say a product box so if wanted to have 4 in a row and they each had padding right to space them out, I use the same technique for last box so it doesn’t go down due to the wrapper.
Am I do it the correct way, is there any other better ways of doing it?
You could, of course, just have padding on top of your P elements. But no doubt that will lead to more problems. As Stomme said, margins are usually better.
It also depends on what follows the last P element, but if you didn’t wanted a lesser margin/padding on the last P element before, say, an H2, you could do something like this:
p + h2 {
margin-top: -10px;
}
In this example, any H2 following a P element is pulled upwards to close the gap between them (via the “adjacent sibling” + selector).
The way you’re doing it now is not wrong. I use and often see classes like first and last on things like lists, for this reason.
There’s CSS you can use instead: :first-child and :last-child. Ie6 doesn’t deal with these, so people who care (about spacing in IE6) use classes anyway.
For things like a bunch of p’s, people tend to use margins, and here they take advantage of margin collapse.
<p>A row of text.</p>
<p>Another row of text</p>
p {
margin: 1em 0;
}
There won’t be 2em between each p, just 1em. Usually this makes the last p look ok as well.
For a row of floated thingies, I tend to use margin, but either way, I do tend to have a class on them. You can sometimes get around this by using display: inline-block since it’ll center the row of boxes, but this also means catering to IE<8 and FF2 with hacks.