Warum wird meine Zelle in der Tabelle erscheinen auch die Polsterung, obwohl ich es eingestellt habe, nicht?

Erstellte ich eine skinny CSS-Klasse, die hat keinerlei margin, padding oder border:

.skinny
{
    margin:0 0 0 0;
    padding:0 0 0 0;
    border:0 0 0 0;
}

Und ich wendete Sie auf eine Zeile, die ein Bild enthält, das auch die skinny Klasse angewendet:

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

Ich versuche, das Bild so nah wie möglich an die <h1> text in die nächste Zelle, so dass Sie gezwungen werden, sich gegen jeden anderen, von Links nach rechts.

Aber egal, wie viele Elemente die ich anwenden skinny Klasse, es scheint so etwas wie eine 'Polsterung' um die einzelnen Zellen der Tabelle, die schafft einen Raum zwischen dem Bild und dem text.

Wie Entferne ich das?

  • Nicht die Antwort, aber kann ich dir nur empfehlen-Eigenschaft verwenden-name: 0 (die short-hand-version 0 0 0 0)... es ist nichts falsch mit der Art, wie es jetzt ist, aber es liest sich einfacher, wenn es nur eine 0. Mit dem "0 0 0 0" Methode ist dafür gedacht, wenn du verschiedene breiten für jede der Kanten.
  • hatte dasselbe Problem, entfernen height-Attribut hat den job für mich
InformationsquelleAutor Brian McInerney | 2010-11-25
  1. 3

    dem Tisch selbst auch Polsterung geben.
    so die definition der Tabelle muss

    <table width="400px" height="180px" class="skinny" cellspacing="0" cellpadding="0">
    • Danke. Ich habe gerade versucht, aber es machte keinen Unterschied. Kann ich mich bewerben, etwas ähnliches auf die Zelle selbst?
    InformationsquelleAutor mooizo
  2. 3

    Kann es nicht sein-Polsterung
    nur versuchen, diese

    border-collapse:collapse;
    InformationsquelleAutor Anish Joseph
  3. 1

    Hatte ich dasselbe Problem, gegoogelt und für Stunden. Problem wurde mit der Einstellung der Höhe, auf der td Elemente. Wenn der Inhalt Höhe 60px, und td ist die Höhe 120px, wird es 30px padding oben und unten jeder.

    Also die richtige Antwort:

    <td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

    entfernen(Höhe)

    • Dieses Verhalten passiert auch wenn Sie vertical-align: top|middle|bottom auf eine Tabelle-Zelle. Der browser unterstellt Polsterung oben und/oder unten der Inhalt der Zelle, um die gewünschte vertikale Ausrichtung.
    InformationsquelleAutor mervasdayi
  4. 0

    Bilder sind inline-Elemente und sitzen auf der Unterseite der Linie, werden Sie genauso behandelt wie ein Brief ohne Unterlänge (z.B. wie a, b und c, aber nicht g, j und y).

    Das Bild auf display: block um dies zu vermeiden (oder twiddle mit vertical-align)

    Besser noch, denn es sieht aus wie Sie haben eine 1x2-Tabelle: nicht verwenden Tabellen für das layout

    • display:block hat keine Wirkung, hier.
    • Kann ich nur hinzufügen, dass die Tabellen gedacht sind (und waren schon immer) für die Anzeige der Daten nur - also nicht für layout-oder auch nur einen Teil der Seite layout. Wenn Sie diese Tabelle für layout dann versuchen Sie es mit divs statt. Es gibt viele Möglichkeiten, das zu erreichen-layout mit divs - zum Beispiel floating / clearing für Spalten, Marge Positionierung wenn Sie möchten, eine "Spalte" in der Mitte der Seite (so dass alle Inhalte angezeigt, in der Mitte des browser-Viewports) und so weiter.
    InformationsquelleAutor Quentin
  5. 0

    Collapsing margins

    Spät zur party, aber es ist, weil Ihre h1-tag hat höchstwahrscheinlich einige Ränder oben oder unten. Die Margen reduzieren, die alle der Weg nach oben durch, um dort oberste element in den dom, bis er findet, ein element mit padding-top oder padding-bottom, der nicht gleich 0 (dies unterbricht die einstürzenden). Es ist ein sehr ärgerlich-Funktion.

    Collapsing margins immer wieder kommen, um mich beißen, wenn ich es am wenigsten erwarten, und es sehr schwierig zu Debuggen.

    InformationsquelleAutor Ally
  6. 0

    Fügen Sie diese zu Ihrem tr's & td's

    cellpadding="0"
cellspacing="0"
    • funktionierte nicht für mich (für einen td und Eltern tr)
    InformationsquelleAutor Trolzie
  7. -2

    /* Entfernen von padding und margin */

    *  
    { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}
    • Das hat keine Wirkung. skinny tut dies bereits.
    InformationsquelleAutor Vlagorce
Schreibe einen Kommentar