Indenting Pictures

Is there any way to indent the bottom picture like the other two at the top?
Code I used and example output:

<img align="left" width="49%" height="auto" src="link.jpg">
<img align="right" width="49%" height="auto" src="link.jpg">
<img align="center" width="auto" height="auto" src="link.jpg">

I don’t understand what you’re asking. The edges of the bottom picture line up with the edges of the top ones, and there’s no background on either side to suggest that anything is indented.

I’m asking how to move the bottom picture apart from two above, how to add gap between these pictures.

Ah, OK.

This probably doesn’t work, but does adding a blank line do it?

<img align="left" width="49%" height="auto" src="link.jpg">
<img align="right" width="49%" height="auto" src="link.jpg">

<img align="center" width="auto" height="auto" src="link.jpg">

(It wouldn’t work in a normal webpage, but maybe it works here in a Markdown app.)

Otherwise, you could use CSS to add some margin, for example:

<img align="center" width="auto" height="auto" src="link.jpg" 
style="top-margin: 1em;"> 

If you don’t know CSS you can read up on the various measurement units and fancier methods of CSS layout at CSS: Cascading Style Sheets | MDN.

You can also pull the styling out of the HTML into a separate snippet to make it easier to maintain, with markup like:

<img align="center" width="auto" height="auto" src="link.jpg" 
class="specialpics"> 

and styling like:

.specialpics {margin-top: 1em;}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.