Riktlinjer för mariginaler och padding?

Hej alla glada!

Satt och tänkte på en sak. Varje element har ju fyra sidor där padding och margin kan sättas, men hur ska man fördela det mest effektivt?

Är det som regel oftast margin bottom och right som gäller?
Om man loopar ut poster från en databas och vill ha ett bestämt avstånd mellan posterna, är det margin över eller under? Vad gör man med första/sista posten som ev. inte ska ha någon mariginal?

Det kanske känns som en konstig tråd men jag tycker ofta att jag hamnar i en sits där jag måste välja vilka element som ska stå för avstånden :r

Jag vet inte om det är till någon nytta men jag slängde ihop följande snutt som kanske kan användas som exempel för att beskriva var man hade satt olika saker...

<div id="container">
  <h1>Rubrik</h1>
  <p>Text<img /></p>
  <form>
    <fieldset>
      <legend>Formulär</legend>
      <label>Fält 1<br /><input /></label>
      <label>Fält 2<br /><input /></label>
    </fieldset>
    <input type="submit" />
  </form>
  <dl>
    <dt>Post 1</dt><dd>1</dd>
    <dt>Post 2</dt><dd>2</dd>
  </dl>
</div>

Hmm..

Om jag bara skulle införa mellanrum mellan posterna (och inget annat) skulle jag rutinmässigt och utan att tveka använda "+" ("efterföljande") i CSS och lägga mellanrummet "innan" (respektive till vänster) alla element utom det första...

<style type="text/css">
dd + dt {border-top: 1px solid #ccc; margin-top: 1em;}  /* alla dt direkt efter en dd */

label {display: inline-block;}  /* marginaler och inline är inte alltid kompisar - men de funkar på inline-block */
label + label {display: inline-block; border-left: 1px solid #ccc; margin-left: 1em;}

</style>

"+" funkar i "allt" som är nyare än IE6 :birp

Nice, + har jag aldrig använt! Sweet.

"label + label" innebär således att det enbart ska påverka labels som ligger efter en label? Detta anses snyggare än att använda first/last-child?

Tack!

Kanske inte snyggare, men till skillnad mot first- och last-child fungerar det helt problemfritt i *alla* webbläsare (utom IE6) såvitt jag har kunnat då fram

... Och med lite mek kan det delvis användas som en sorts nth-child också (även om reglerna blir grötigare då - vilket är priset för det just nu bredare stödet
)
ex:

li {font-size:normal} /* grundläge */
li+li+li+li {font-size:larger} /* 4:e li i rad */
li+li+li+li+li {font-size:normal} /* alla därefter */

First- och last-child har väl en helt annan funktion egentligen, oftast, för mig i alla fall, så vet jag inte hur många element det kommer röra sig om totalt och då vill man ju ha t ex:

li { margin-right: 10px; }
li:last-child { margin-right: 0; }

Det har de - men om exemplet du ger handlar om mellanrum mellan element (dvs att li-elementen t.ex. har t.ex. stilen display: inline-block (med eller utan IE7-hack) för att lägga upp dem i en horisontell rad, kan exemplet

li { margin-right: 10px; }
li:last-child { margin-right: 0; }

uttryckas helt likvärdigt med

li { margin-right:0; margin-left: 0; }
li + li { margin-left: 10px; }

eftersom li + li påverkar alla li i en oavbruten sekvens från och med det andra (och inte enbart det li som har exakt ett li innan) ;)
... och last-child fungerar varken i IE7 eller IE8 (men det gör +)

li {font-weight:normal}
li:first-child,
li:last-child {font-weight: bold}

är kanske ett bättre exempel på att + inte räcker till för alla situationer...