How to Add left and right margins to image (with CSS)

<!DOCTYPE html> <html> <body> <h1>Add margins with CSS</h1> <h2>Image with no margins</h2> <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 left and right margins</h2> <p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">This is some text. This is some text. This is some text.</p> </body> </html>