Puoi applicare un margine all'immagine quando la inserisci da editor nell'articolo.Questi sono due printscreen sia dell'editor tinymce che di jce.
https://prnt.sc/BGetV0CObZZVhttps://prnt.sc/PqHdX6HqmbStSe visualizzi il codice dell'articolo con codemirror o con l'editor di tinymce puoi aggiungere un margine con la classe style="margin: ...px";
Nel tuo caso:
<img src="/images/sponze470.jpg" itemprop="image" loading="lazy" width="470" height="400" style="margin: 28px">Ho lasciato un unico valore che valga per tutti e quattro i lati perchè se vai a modificare soltanto il margine destro, sui dispositivi mobili in cui la foto compare a colonna intera vedrai i margini asimmetrici e ne vedrai di più a destra che a sinistra.
Nel tuo caso ti consiglio di impostare un margine quando inserisci l'immagine nell'articolo e di non fare modifiche al css, poichè queste varrebbero per tutte le immagini presenti nel sito. A meno che non scrivi una classe nel file custom e ogni volta la richiami attribunedola all'immagine:
Tipo:Nel CSS
image-margin {
margin:10px;
}Nell'html dell'articolo:
<img src="/images/sponze470.jpg" itemprop="image" loading="lazy" width="470" height="400" class="image-margin">Questa è la classe che attualmente regola la tua immagine.
figure {
margin:0 0 2em
}Come vedi non c'è un margine destro. Ma questa dovrebbe essere la regola da sovrascrivere eventualmente nel file custom.
Comunque ripeto, se analizzi la pagina con gli strumenti del browser puoi fare delle prove estemporanee.
Nel caso tu imposti un margine valido per tutti e quattro i lati ovviamente vedrai anche il margine superiore, quindi il testo risulterà non allineato alla foto. Quindi potresti eventualmente aggiungere soltanto dei margini laterali. Ovviamente nel caso di una foto con testo sopra e sotto, a quel punto avresti il testo attaccato superiormente.
Buone prove
ps. In ultimo ti consiglio di leggere
questo per le varie regole css anche "abbreviate" (da metà articolo in poi, leggi tutto)
