h1 en de witregel

[jeel2008]

hallo, is het mogelijk om de automatische witregel tussen een h1 kopje en de tekst zelf weg te halen met css?
ik vind het nl veel mooier als de titel rechtstreeks boven een alinea staat, zonder tussenregel

 

[ErikBooy007]

h1 {

  margin: 0px;

}

Zo?

 

[csshunter]

of zo?

h1, p {
   margin: 0;
   padding: 0;
}

 

[jeel2008]

ok bedankt, allebei
de eerlijkheid gebiedt te zeggen dat

h1 {

margin: 0px;

}

niets deed

deze wel:
h1, p {
margin: 0;
padding: 0;
}

 

[csshunter]

Ja, behalve een <h1> heeft ook een <p> witruimte eromheen zitten, dus als je de margins van de <h1> op nul zet, zit de margin van de <p> er nog steeds in.
De witruimte van een <h1> is in Firefox iets groter, en als je alleen de <p> witruimte hebt, is die in Firefox net iets kleiner. Bij Internet Explorer 7 is die witruimte hetzelfde.
Browsers doen het dus verschillend!

• Zie voorbeeldje.

Een goede gewoonte (waarschijnlijk al door Erik gebruikt, zodat hij de <p> niet vermeldde ) is, om het stylesheet te beginnen met alle <h>'s en de <p> standaard op nul te zetten. Veilig (cross-browser) is ook om daarbij niet alleen de margins, maar ook de paddings tot nul te reduceren (die kunnen ook wel eens verschillen):

h1, h2, h3, h4, h5, h6, p {
   margin: 0;
   padding: 0;
}

Vervolgens kan je, als je dat ergens plaatselijk nodig hebt, in een bepaalde <div> de zaken anders regelen via een eigen ID of class; bijv.:

#menu h1 {
   margin-top: 20px;
}

Zo moeten de browsers wel naar jouw pijpen dansen, in plaats van omgekeerd!

Met vriendelijke groet,
CSShunter

 

[jeel2008]

witregel

ok bedankt, wederom zeer leerzaam

 

[ErikBooy007]

Een goede gewoonte (waarschijnlijk al door Erik gebruikt, zodat hij de <p> niet vermeldde ) is, om het stylesheet te beginnen met alle <h>'s en de <p> standaard op nul te zetten. Veilig (cross-browser) is ook om daarbij niet alleen de margins, maar ook de paddings tot nul te reduceren (die kunnen ook wel eens verschillen):

h1, h2, h3, h4, h5, h6, p {
   margin: 0;
   padding: 0;
}

Eigenlijk beginnen al m'n stylesheets zo:

* {
  padding: 0px;
  margin: 0px;
}

Zo weet ik dat van elk element de marges en paddings in IE en echte browsers hetzelfde zijn. Als ik dan wil dat een element een marge heeft, zet ik die er zelf wel in. Wat mij betreft mogen alle browser standaard alle margins en paddings op 0 zetten.

Weet niet waarom, maar uit gewoonte plaats ik ook achter een 0 altijd "px".

 

[csshunter]

Eigenlijk beginnen al m'n stylesheets zo:

* {
  padding: 0px;
  margin: 0px;
}

Yeps, dat kan inderdaad ook. Het nadeel daarvan vind ik, dat je dan tegelijk alle <ul>'s en <li>'s meepakt, waarmee de bullets op rare plaatsen kunnen komen te staan, en je dat weer moet bijstellen. Maar in 9 van de 10 gevallen geldt dat dan alleen voor de #content, want in menu's gooi ik doorgaans de bullets er toch uit met {list-style: none;}.

Wat mij betreft mogen alle browser standaard alle margins en paddings op 0 zetten.

Wat mij betreft ook! Alleen als je dat zou invoeren, is het niet "backwards compatible" (voor oude versies bruikbaar), en zou zo'n 90% van de bestaande sites wat erg uit de bocht vliegen, denk ik zo. Ander tegenargument: er is dan visueel geen (default) verschil meer tussen een <br> en een nieuwe <p>, wat er al in zit vanaf de html-oertijd. Dus ik denk niet dat ze er gauw aan beginnen.

Terzijde: indertijd heeft Eric Meijer eens een complete set van "terug naar niks" css-instellingen gemaakt, met dus een complete gelijkheid voor alle browsers (het Reset CSS stylesheet). Maar dat vind ik een beetje teveel van het goede, want dan moet je daarna alles opnieuw gaan instellen.
Voor mij is dat middel erger dan de kwaal! (want liever lui dan moe)

Met vriendelijke groet,
CSShunter

PS: langzamerhand dreig ik een beetje af te glijden naar offtopic.

 

[ErikBooy007]

Ik ben het met al je punten eens