Bildpadding in CSS, HTML

Ich habe Probleme mit Bildern in einer Tabelle. Obwohl ich tr width=95 sete und das Bild auch eine Breite von 95 hat, hat der tr automatisch eine Breite von 97 (2 px Auffüllung auf der rechten Seite).

Allerdings habe ich style="padding: 0px" explizit angegeben.

Eine Beispielseite ist wie folgt: http://beta.worcell.com/sony.html

Ein weiteres Problem, das ich habe, ist mit den Auf- und Abwärtspfeilen (innerhalb der Kaufspalte). Ich möchte, dass sie den gleichen Abstand zum Textfeld haben, aber das Hinzufügen eines weiteren Zeilenumbruchs zum unteren Pfeil würde zu viel Leerzeichen erzeugen. Wäre ich in der Lage, das in CSS zu ändern?

Vielen Dank.

Antwort auf "Bildpadding in CSS, HTML " 6 von antworten

in styles.css (Zeile 77) haben Sie

tr td {
  border:1px solid #DDDDDD;
  padding:0.6em;
}

Teil des Problems ist:

müssen Sie mit einem good css reset. that should take care of the padding issues for you. import the css reset as the first css style on your page, and go from there. beginnen. die sich um die Polsterungsprobleme für Sie kümmern sollte. Importieren Sie das css-Reset als ersten css-Stil auf Ihrer Seite, und gehen Sie von dort aus.

auch, verwenden Sie nicht

<br/>

, wenn Sie es helfen können. alles, was br tut, kann durch die Verwendung von Margin

erreicht werden

"padding: 0px" in Ihrem Code gilt in diesem Fall auf die Tabellenzelle und nicht auf das Image-Tag.

Sie müssen:

styles.css (line 15)
img {
border:0 none;
margin:-2px; <-- remove this
padding:0;
}

styles.css (line 77)
tr td {
border:1px solid #DDDDDD;
padding:0.6em; <-- remove this
}

Die Polsterung scheint nicht das Problem zu sein, es sind die Margen, die Sie festgelegt haben. Im Stylesheet haben Sie

img {
    padding:0px;
    border:0px;
    margin:-2px;
}

Der "Margin: -2px;" Teil ist, was Macht Ihre Bilder 97px statt 95px. Legen Sie es auf "margin: 0px;" fest, und die Bilder werden normal angezeigt. Sie müssen dann auch

menu img {
    margin: -2px;
}

hinzufügen, um Ihre Menübilder so ausgerichtet zu halten, wie Sie sie hatten.

Für die Auf- und Abpfeile müssen Sie Ihr Markup überdenken. Der Down-Link befindet sich innerhalb eines Formulars, der Up-Link jedoch nicht, was etwas inkonsistent ist. Sie sind auch in Absatz-Tags enthalten, die als Blöcke angezeigt werden, wodurch sie untereinander erscheinen, so dass der Abwärtspfeil erst nach dem Ende des Mengenfeldes usw. erscheint.

Hmmmmm, 152 Warnungen in HTML Validator, viele nicht geschlossene Tags....

Für das spezifische Problem des Leerzeichens neben dem Bild können Sie versuchen, den Leerraum zwischen dem Tag </a> und dem Tag </td> zu entfernen.