Paragraaf maakt gaten tussen div's

[Verwijderd]

Ik zit met een probleem dat ontstaat door het plaatsen van paragraphs binnen mijn design.

De margin die standaard aan de <p> vast zit zorgt er namelijk voor dat er gaten tussen mijn div's komen. Nu kan ik natuurlijk via CSS de margin's wel verwijderen, maar dat wil ik niet.. omdat dan overal de margin verdwijnt ook tussen verschillende paragraphs.

probleem zie je hier:
http://www.beeldvangermedia.nl

Ik zie vast iets simpels over het hoofd.. of ben ik gewoon verkeerd aan het designen.

[rvrbtcpt]

Probeer dit eens:

code:

.BerichtTekst  {
font-size:16px;
margin:0;
padding:0;
}

of

code:

P  {
margin:0;
padding:0;
}

Dan heb je het meteen bij alle <P> tags.

Standaard tags zoals de <P> en ook de <H1> hebben al bepaalde instellingen.
Die moet je veranderen met CSS wanneer ze voor jouw design niet lekker werken.

[ Voor 62% gewijzigd door rvrbtcpt op 09-06-2010 13:25 ]

[Verwijderd]

Ja dat begreep ik Frijns.. maar het probleem is dan dat ik tussen de paragraven zelf ook geen margin's meer heb.. en dat is natuurlijk beetje onhandig... Is er niet een mogelijk dat margin van iets IN een div niet BUITEN de div treedt?

[mcDavid]

Verwijderd schreef op woensdag 09 juni 2010 @ 13:26:
Ja dat begreep ik Frijns.. maar het probleem is dan dat ik tussen de paragraven zelf ook geen margin's meer heb.. en dat is natuurlijk beetje onhandig... Is er niet een mogelijk dat margin van iets IN een div niet BUITEN de div treedt?

Dat heet padding.

-edit-
<p class="berichttitel">, zou je daar niet gewoon <h2> van maken ofzo?

[ Voor 10% gewijzigd door mcDavid op 09-06-2010 13:38 ]

[fikst]

padding gebruiken ipv margin is in mijn ogen enkel symptoombestrijding.

zet bij #offline-tekstvak eens: overflow: auto; of overflow: hidden;

[mcDavid]

fikst schreef op woensdag 09 juni 2010 @ 13:40:
padding gebruiken ipv margin is in mijn ogen enkel symptoombestrijding.

zet bij #offline-tekstvak eens: overflow: auto; of overflow: hidden;

Betere oplossing inderdaad, dan kun je de standaard stijlen in tact laten

[Bosmonster]

Volgens mij lost overflow niet de margin verdubbeling op.

Met CSS is het relatief eenvoudig op te lossen door de laatste p zonder marge te renderen (last-child). Werkt niet in antieke browsers, maar een echte showstopper is het dan ook niet.

[Verwijderd]

mcDavid schreef op woensdag 09 juni 2010 @ 13:44:
[...]

Betere oplossing inderdaad, dan kun je de standaard stijlen in tact laten

Inderdaad... Dit lijkt de oplossing te zijn.

Het padding verhaal veroorzaakt namelijk allerlei overlay problemen.. dus dat was niet de oplossing.

[R4gnax]

Bosmonster schreef op woensdag 09 juni 2010 @ 13:47:
Volgens mij lost overflow niet de margin verdubbeling op.

Met CSS is het relatief eenvoudig op te lossen door de laatste p zonder marge te renderen (last-child). Werkt niet in antieke browsers, maar een echte showstopper is het dan ook niet.

Het is geen margin-verdubbeling. Het probleem is margin-collapse. De margin-bottom van de laatste <p> tag wordt samengevoegd met die van de <div> tag en dus krijg je een gat tussen die <div> tag en de volgende.

Oplossing is om wat CSS toe te voegen welke margin-collapse voorkomt. De <div> tag een overflow instelling anders dan 'visible' geven is er zo één. Een andere mogelijkheid is om de <div> tag een padding-bottom te geven. Maakt niet uit hoe groot: zolang er padding is op een edge vindt er langs die edge geen margin-collapse plaats.

Microsoft had met oudere IE versies hebben hier zo hun eigen gedachten over, of waarschijnlijker: hebben hier gewoon niet over nagedacht. Het toeval wil dat je voor IE6/7 margin-collapse kunt voorkomen door een container 'layout' te geven.

[Bosmonster]

Ow, dan heb de vraag verkeerd begrepen

[mcDavid]

Goed topic dit, ik heb hier in het verleden best eens mee lopen kloten. Uiteindelijk wel uitgekomen altijd, maar die post van r4gnax maakt wel duidelijk hoe het nou precies komt.