Marginal runt bild påverkar inte border

Tråden skapades och har fått 11 svar. Det senaste inlägget skrevs .
1

jag har en h4-rubrik med en streckad linje under. I spalten ligger en bild med float right. Bilden har marginal för att knuffa bort texten och det funkar, men linjen lägger sig dikt an mot bilden.

css

.imgright {
margin-left: 14px;
margin-top: 18px;
margin-bottom: 18px;
float: right;
}

h4 {
margin: 0;
padding-top: .5em;
padding-bottom: .25em;
border-bottom: 1px dotted #aaa;
font-size: 12px;
color: #7E1A00;
text-align: left;
line-height: 120%;
list-style: none;
}

Några förslag på hur man får linjen att hålla sig undan?

sätt båda elementen till display:block

Ursprungligen av lill_postiZ:

sätt båda elementen till display:block

hmm... ser ingen skillnad?

  • Medlem
  • International user
  • 2009-05-06 21:58

Testa med "padding" istället för "margin" på bilden och se om det hjälper.

Det vill inte funka. Det syns redan inne i Dreamweaver att marginal/padding inte trycker bort linjen. I bilden är det marginal, padding samt marginal+padding i den ordningen. Linjen går rakt igenom de fälten.

Jag har vit bakgrund så för att komma vidare satte jag en tjock, vit linje (border) istället, men det vore intressant att få svar på frågan här ändå.

  • Medlem
  • International user
  • 2009-05-07 21:24

Hmm, i så fall hade jag testat att sätta margin-right: 20px; (eller vad du nu vill ha) på h4 istället, så att den distansierar sig mot vad det nu är som finns på högersidan.

Ursprungligen av encore:

Hmm, i så fall hade jag testat att sätta margin-right: 20px; (eller vad du nu vill ha) på h4 istället, så att den distansierar sig mot vad det nu är som finns på högersidan.

Jag vill inte ha marginal på h4 när texten flödar förbi bilden och det kommer en ny h4-rubrik som ligger i helspalt. Det mest naturliga är att bilden håller undan, om det nu är möjligt.

  • Medlem
  • International user
  • 2009-05-07 21:51

Ok, då hade jag gjort strecket som en loopande bild istället och lagt den som bakgrund på h4:an, positionerad i botten, och sett om padding-tricket som du gör på bilden fungerar då istället. Slut på tips!

Ursprungligen av encore:

Ok, då hade jag gjort strecket som en loopande bild istället och lagt den som bakgrund på h4:an, positionerad i botten, och sett om padding-tricket som du gör på bilden fungerar då istället. Slut på tips!

Men det där blir en "jobbaruntare".

Jag blir så nyfiken av problemet så jag skulle vilja veta om det verkligen inte finns någon metod att lösa problemet. Finns det ingen lösning skulle jag gärna se att någon css-professor kliver in i tråden och pekar med hela handen och säger "går ej att utföra - gör som encore säger".

  • Medlem
  • Finland
  • 2009-05-08 06:50

Att ha "floats" utan "widths" är problemet tror jag.
Jag testade att sätta bildens bredd i .imgright med 120px och h4 till 80% och det funkar men om det är tillfredsställande vet jag inte.

Ursprungligen av Peppe:

Att ha "floats" utan "widths" är problemet tror jag.
Jag testade att sätta bildens bredd i .imgright med 120px och h4 till 80% och det funkar men om det är tillfredsställande vet jag inte.

Jag ser ingen skillnad om jag sätter dit "width". Jag vill även att h4 täcker hela spaltens bredd när texten flödar vidare under bilden.

1
Bevaka tråden