Ich habe eine skinny
CSS-Klasse, die keinen Spielraum, Klotzen oder Rand hat:Wie ändert man dieses Tabellenlayout in ein CSS-Layout?
.skinny
{
margin:0 0 0 0;
padding:0 0 0 0;
border:0 0 0 0;
}
Und I angewandt, es zu einer Zeile ein Bild enthält, die auch die skinny
Klasse angewandt wird:
<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 den Text <h1>
in der nächsten Zelle zu bringen, so dass sie von links nach rechts gegeneinander geschoben werden.
Aber egal wie viele Elemente ich die skinny
Klasse anwenden, es scheint so etwas wie eine 'Auffüllung' um jede der Tabellenzellen zu geben, die einen Abstand zwischen dem Bild und dem Text schafft.
Was müsste ich tun, um dies zu einem CSS-Layout zu machen, das das Bild direkt auf die linke Seite des Textes bringt, ohne Leerzeichen zwischen ihnen?
Ich versuchte dies:
<td width="33%" align="center" class="skinny">
<div class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></div>
<div class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></div>
</td>
Aber es setzt das Bild auf dem Text.
Müssen Sie nicht '0px' anstelle von' 0' schreiben? – thejh
@thejh: nein. Null ist Null. '0px' ist das gleiche wie' 0em' oder '0cm', also können Sie (und sollten wohl) einfach' 0' schreiben. –
@Paul D. Waite: ah, ok – thejh