Kein <div> und kein <p> im <summary> erlaubt - was tun?

[fietur]

Hallo.

Warum dürfen weder <div> noch <p> innerhalb eines <summary> stehen?

"Element div not allowed as child of element summary in this context." lautet die Validator-Meldung hierzu.

Auf meiner Seite habe ich eine Vielzahl von <article>-Containern mit folgendem Aufbau:

<article>
<details>
<summary>
<img ...>
<p>ein paar Zeilen</p>
</summary>
<p>weiterer Text>/p>
<img ...>
<p>...</p>
</details>
</article>

Im CSS ist p {padding:1rem;} notiert. Die Bilder sollen (meist) die gesamte Breite einnehmen.

Das obenstehende HTML wird zwar wie gewünscht gerendert, ist aber eben nicht Validator-konform.

Wenn ich die <p>-Tags entferne und summary {padding:1rem;} notiere, wird es zwar konform, aber <img> erhält unerwünschterweise ebenfalls Ränder. summary :not(img) zu notieren, ändert daran nichts (wäre das überhaupt korrekt so?).

<div> darf (weil kein phrasing content) ebenfalls nicht notiert werden. Wählt man hilfsweise etwas wie <span> und weist so einen Rand zu, wird ja nur die erste Zeile eingerückt, was ebenfalls unerwünscht ist - es passt nicht zum Rest.

Wie kann ich im <summary> Text von Grafik getrennt auszeichnen?