Extra Polsterung auf den verlinkten Bildern (alle browser)

Ich habe ein problem mit dem bekommen von extra-Polsterung auf link-element mit einem Bild im inneren. Es passiert in allen Browsern, Safari, Firefox, IE.

Ich habe ein reset-stylesheet verwendet, so sollte es keine extra Margen auf Abstand aber nach der Inspektion ist es klar, dass die a - element verfügt über einige zusätzliche Boden-Polsterung aus dem nichts. Irgendwelche Ideen?

Hier ist das markup und CSS:

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie {
padding: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}

div.home-col .movie img {
padding: 4px;
margin: 0;
border: 1px solid #d0d0d0;
}

Würde gerne sehen, diese Bilder, die Sie mit der CSS-background-images. In deinem Beispiel scheint es, Sie sind explizit setzen 11px Polsterung auf der Unterseite .Film, also, wenn Sie Ihre Schatten-Bild nicht, vielleicht dein Schatten kleiner ist als 11px?

InformationsquelleAutor Justine | 2010-08-20

19

Versuchen Sie die folgende Zeile hinzufügen, um Ihre link-element: line-height: 0;
```
div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
line-height: 0;
}
```
- Ich hatte das gleiche problem, und fügte hinzu, es zu dem übergeordneten div-Element und es hat funktioniert, ich bin mit der HTML5-Doctype und das Problem plötzlich tauchten
- VIELEN, VIELEN DANK!!!!
InformationsquelleAutor Ian Yates
10

sorry die Antwort auf diese Frage 3 Jahre später, aber diese Seite ist in erste google Seite und ich fühle die Verantwortung .....
Antwort: nur hinzufügen, "vertical-align: top;" zu img - tag innerhalb eines tag.
- Danke, das ist die Antwort, die für mich gearbeitet.
- Dies funktioniert sehr gut. In der Tat "Mitte" oder "unten" wird auch als vertical-align, solange es nicht 'baseline'. 'baseline' behält sich vor, etwas Platz unter dem element für die Unterlänge (z.B. der Schwanz des y), die am Ende kann als unerwünschte "Polsterung".
- Danke für deine Antwort. Dies funktioniert sehr gut.
InformationsquelleAutor user3051858
0

Hintergrund Bild für die movie-Klasse erscheint unten der Kasten und Polsterung angewendet, so verwenden Sie das folgende, wenn Sie das 11px Raum an der Unterseite des Bildes.
```
div.home-col .movie {
margin: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}
```
- Das ist nicht der Fall. Die Polsterung ist wo der Schatten der Sache ist - und es ist genau die gleiche Höhe wie das Schattenbild, so dass nicht ist, was das problem verursacht. Die extra-Polsterung wird angewandt auf a element, nichts anderes.
InformationsquelleAutor Nick Pyett
0

Haben Sie versuchen, hinzufügen Polsterung:
```
div.home-col .movie a {
display: block;
padding: 0 0 0 0;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}
```
Wenn nicht, evtl. könnte man hinzufügen, a:visited, um es zu testen, um zu sehen, ob sich was ändert.
- Ja, ich habe versucht, das zurücksetzen der Polsterung sowie. a:visited funktioniert auch nicht. Sonderbar genug, ich erinnere mich an das gleiche Problem von einigen früheren Projekten mit.
InformationsquelleAutor Ken
0

Sind Sie sicher, dass alle CSS? Ich sehe nicht das problem, Sie beschreiben auf dieser test-Seite: http://www.pauldwaite.co.uk/test-pages/3532870/

InformationsquelleAutor Paul D. Waite
0

Hallo, ich hatte das gleiche problem und ich fand, dass, wenn Sie vertikal ausrichten-das Bild auf der Unterseite wird es fixiert werden.

Bild im div hat mehr Platz unter dem Bild

InformationsquelleAutor Daniel Del Core
0

Hinzufügen style="padding:0px;" das problem bei mir gelöst.

InformationsquelleAutor user1270392

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.