How to Add top and bottom margins to image (with CSS)

See the Example

index.html

Example: HTML

<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with top and bottom margins</h2>
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">This is some text. This is some text. This is some text.</p>

Output should be:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin