CSS: Mellomrom ved linjeskift

[pianoforte]

Hvordan kan jeg ved hjelp av CSS få litt mellomrom (i høyden) ved linjeskift?

[Steinmann]

vel, antar her at det er et p element du vil gi mer høyde?

Da blir det vel noe så enkelt som

p {
margin: 2px 0;
}

Snakker du om br så er det vel mulig å gjøre det samme... muligens.

 

bare å øke den 2px om du trenger yttligere margin

[Jakob K]

Eller kanskje han rett og slett snakket om line-height

p {
 line-height: 1.2em;
}

[pianoforte]

Er ikke line-height jeg snakker om, og metoden din, orsus, fungerer ikke med br.

 

Dessuten vil jeg knytte det opp mot en spesiell div.

[Jakob K]

Så du vil bare ha mer linjehøyde ved et tvungent linjeskift (etter BR)?

 

Knytte CSS-kode til én div:

<div id="content"></div>

div#content {
 color: #fff;
}

[mikk-]

Hm. Har aldri hørt om styling av BR-elementet før. Lagde derfor en liten test, hvor jeg brukte display:block, samt høyde og bredde. Testen ga ingen utslag i Opera og Firefox, men klarte å skifte bakgrunnsfarge på teksten i IE.

 

EDIT: Ergo, det er ikke mulig.

Har forøvrig vanskelig for å forestille meg en situasjon der du ikke heller kan bruke AfroDude sitt forslag.

Endret 12. september 2005 av Mikka

[Jakob K]

Hm. Har aldri hørt om styling av BR-elementet før. Lagde derfor en liten test, hvor jeg brukte display:block, samt høyde og bredde. Testen ga ingen utslag i Opera og Firefox, men klarte å skifte bakgrunnsfarge på teksten i IE.

 

EDIT: Ergo, det er ikke mulig.

Har forøvrig vanskelig for å forestille meg en situasjon der du ikke heller kan bruke AfroDude sitt forslag.

Testet litt selv, dette funerer - med unntak av IE:

p br:after {
 content: "";
 display: block;
 height: 1.2em;
}

Endret 12. september 2005 av AfroDude

[pianoforte]

Så du vil bare ha mer linjehøyde ved et tvungent linjeskift (etter BR)?

 

Knytte CSS-kode til én div:

<div id="content"></div>

div#content {
 color: #fff;
}

Det første er helt riktig forstått, men når jeg sa en bestemt div, mente jeg at jeg bare vil ha dette til å skje innenfor en div jeg har på siden min.

[mikk-]

Drister meg til å spørre: Hva er så problemet?

[Jakob K]

Det første er helt riktig forstått, men når jeg sa en bestemt div, mente jeg at jeg bare vil ha dette til å skje innenfor en div jeg har på siden min.

Ja. Da skulle det vel eksempelet fungere ypperlig da: Du vil stilsette ett, bestemt DIV-element, du legger en ID ved det elementet (som i eksempelet over: <div id="hva_enn_du_kaller_den">) og du definerer CSS-en til elementet slik som over:

div#hva_enn_du_kaller_den br:after {
 content: "";
 display: block;
 height: 1.2em;
}

 

Edit: Skrivefeil

Endret 12. september 2005 av AfroDude

[pianoforte]

Sorry, leste ikke godt nok. Men problemet er at jeg kun får :after til å fungere i Opera. Ikke Firefox, Safari eller IE.

[Jakob K]

Tør jeg spørre om hvorfor du vil ha ekstra linjeavstand etter BR..?

[pianoforte]

Tør jeg spørre om hvorfor du vil ha ekstra linjeavstand etter BR..?

Vil oppnå litt av den samme effekten som <p>. Altså, jeg vil bruke <br> som avsnitt.

 

Men jeg tror jeg likevel går over til <p>.

[Jakob K]

Hvis du skal dele opp i avsnitt bør du for all del bruke P ja, da det der dét P er beregnet for.

[Steinmann]

Testet litt selv, dette funerer - med unntak av IE:

p br:after {
 content: "";
 display: block;
 height: 1.2em;
}

Dette er egentlig en veldig ulogisk oppbygging som jeg tror bare støttes som en test rundt css3/wa1.

:after/:before funker på følgende måte:

<element><:before></:before>Content<:after></:after></element>

fordi br ikke har noen slutt tag blir dette noe rart, omtrent som med img, bare værre.

Anne's tanker om temaet

 

Du kommer sikkert til å rette på meg her henrik

 

Uansett er det nok p som er det riktige å bruke her.

Eventuelt en liste el lignende.

Kommer helt ann på dataene

[Cucum(r)]

Du kommer sikkert til å rette på meg her henrik

Neh, er ikkje så mykje å rette på

 

I XML gir det egentlig ganske meining, sidan <br /> er akkurat det samme som <br></br>, og det då blir noko slikt:

<br><:before></:before>Innhold, som er tomt<:after></:after></br>

 

Men på samme måte er jo HTML ein forenkla utgave av SGML, og det er òg XML, som XHTML er basert på.

[Jakob K]

Tja, synes ikke det blir så feil/ulogisk å legge til en boks med fast høyde etter et linjeskift.

<p>Lorem ipsum<br><br:after> </br:after>dot sit amet</p>

Hadde kanskje vært mer semantisk å bruke content: line-break; eller noe slikt isteden bare, framfor en tom boks.

 

Fungerer ikke :after/:before i Firefox btw?

[Cucum(r)]

Fungerer ikke :after/:before i Firefox btw?

:after, ::after, :before og ::before er støtta fullt ut, med èitt unntak: POSITION-egenskapen er ikkje implementert.

[Jakob K]

:after, ::after, :before og ::before er støtta fullt ut, med èitt unntak: POSITION-egenskapen er ikkje implementert.

Jeg trodde det var det ja, han brukte kanskje en tidligere versjon her:

Men problemet er at jeg kun får :after til å fungere i Opera. Ikke Firefox, Safari eller IE.

 

Er det noe forskjell på eller har det noe å si om man bruker :before eller ::before, siden du skrev de hver for seg?