Wie bekomme ich einen Abstand hin?

Mach Dir doch einen div-Block, der Deinen Anforderungen entspricht, also etwa sowas:

<div class="beitrag">

<img ...>
<p>
<br>
...
</p>

</div>

In .beitrag (oder wie immer Du das Ding nennen willst) definierst Du z. B. einen Abstand nach unten.

für .beitrag img definierst Du, wie sich das Bild innerhalb von "beitrag" (also kontextabhängig) verhalten soll, also z. B. float:left. Wichtig dabei ist eigentlich nur, daß das Objekt, das umflossen werden soll, also in diesem Falle das Bild, VOR dem Text steht.

Und diesen Block verwendest Du dann, so oft Du ihn benötigst.

Diese Definitionen würde ich auf keinen Fall in den Seitencode schreiben! Inhalt und Layout sollten streng getrennt sein, das vereinfacht auch Änderungen.

Schreib die Definitionen also ins style.css und guck Dir an, wie es aussieht.

Quick & dirty kann ich Dir nur dieselbe Empfehlung geben wie jottlieb schon weiter oben:

CSS 4 You - The Finest in Stylesheets: Workshop CSS: Allgemeines

Wenn Du lieber Bücher magst, ich fand "CSS-Praxis" von Kai Laborenz sehr hilfreich. (Nein, weder bin ich der Autor oder mit dem Verlag verbandelt, noch behaupte ich, daß es das beste oder das günstigste Buch ist.)

Das ist alles nicht sehr kompliziert, man muß nur die Grundlagen einmal richtig verstehen. Wenn Du mehr willst als ein Standard-Theme zu benutzen oder wenn Du einfach auch ein bißchen Spaß an der Sache gefunden hast, empfehle ich Dir, Dich mal ein bißchen damit auseinanderzusetzen. Geht bei dem guten Wetter auch im Park, sofern Du ein Notebook hast!

Nicht quick & dirty genug? Also gut, aber nur ausnahmsweise:

In die style.css-Datei (ich gehe mal davon aus, daß es nur diese Standard-Datei in Deinem Theme gibt; wenn Du eine andere verwendest, nimm die) schreibst Du:

.beitrag { margin-bottom: 20px; }

.beitrag img { float: left; }

Erklärung: mit .beitrag definierst Du eine sog. class, das ist eine selbstdefinierte Stilklasse, die beliebig oft auf einer Seite vorkommen darf. Der verpaßt Du so einen unteren Abstand.

Die zweite Zeile definiert das html-tag img um - ja, das geht! -, und zwar kontextabhängig, also nur innerhalb von .beitrag. Denn Du willst ja sicherlich nicht, daß plötzlich überall die Bilder linksbündig floaten, oder?

Das ist der Teil der Arbeit, der im style sheet zu tun war.

Der zweite Teil betrifft Deine Seiten. Guck Dir mal die index.php oder die page.php (auch hier gibt es die Möglichkeit, eigene Vorlagen zu erstellen, und hier gilt genau so, daß Du die dann eben auch verändern mußt, wenn Du welche davon verwendest) an.

Du wirst auf etwas in dieser Art stoßen:

Zitat

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

Das ist die entscheidende Schleife, die den Inhalt auf die Seite befördert: "Wenn es posts gibt, dann mach das und das …" und, sofern diese erste Abfrage wahr ist: "Solange es posts gibt, mach das und das …"

Und innerhalb dieser Schleife steht, neben vielleicht manchem anderen ("vielleicht", weil nur die folgende Zeile wirklich nötig ist):

Zitat

<?php the_content('mehr'); ?>

Diese Zeile bedeutet: Zeige den Inhalt an, und wenn er abgeschnitten werden soll (d. h. wenn Du das more-tag beim Schreiben eingefügt hast, weil der komplette Beitrag für die erste Seite zu lang ist), dann verlinke auf den kompletten Text und nimm als link-Text das, was in der Klammer in Anführungsstrichen steht (muß natürlich nicht 'mehr' sein).

Das ist die Grundstruktur. Und die erweiterst Du jetzt ganz einfach so:

Zitat

<div class="beitrag>
<?php the_content('weiter...'); ?>
…
</div>

Wobei das, was sonst noch innerhalb der inneren Schleife steht (sie endet mit "<?php endwhile; ?>") mit ins div-Tag hinein muß. Und das div-tag muß natürlich innerhalb der beiden Schleifen stehen. Dadurch wird es bei jedem neuen Posting auch wieder miterzeugt.

Ich hoffe, damit kommst Du weiter. Wenn nicht: Gehe zum Anfang dieses Postings.