HTML Snippet: <img> Tag Attributes

The <img> tag is used for placing images in a HTML document. The <img> tag has many style properties. "display" is one important property, that is commonly used. When 'display' is assigned with the value of 'block', the img tag, will generate a block box with a line break before and after the element. The box contains the image. The following image illustrates the above:

HTML Code:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgEJdK7q11m-vjCu74yKCSqrjdyf3P7ou502lLwOt5oxtGH0uqZpeP71HIDoDQQ12sKMW5f6uLd766FrShVPT2GitxTvfZsBsqDgnhiCRcryGf2R1yKaJcIspCi9f6pUeujkGV0nd81Tr/s1600-h/a+r+rahman+the+musical+storm.jpg"><img style="display:block; margin:0 auto 10px;cursor:pointer; cursor:hand;width: 150px; height: 196px; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgEJdK7q11m-vjCu74yKCSqrjdyf3P7ou502lLwOt5oxtGH0uqZpeP71HIDoDQQ12sKMW5f6uLd766FrShVPT2GitxTvfZsBsqDgnhiCRcryGf2R1yKaJcIspCi9f6pUeujkGV0nd81Tr/s320/a+r+rahman+the+musical+storm.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5416612633228985058" /></a>

Similarly, "float" is another important property used to place an image on the left or right side while having a text of paragraph wrap around it. 'float' can take only two values either left or right.

HTML Code:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpL4JOQLo5DjpCgWUmhSsuaELjWDIn7vPY-xuL_zJqbTftf6vFEYSGwoC1tFgaZSTLSaXSjxcoXsInZPtCI9b_Di9JIhYcZaSGk5U1VgrMy2vuGfSGEsEDeCPpLYRAjd3t-dQhHQVra-ti/s1600-h/float+right.jpg"><img style="display:block; margin:0px auto 0; text-align:center;cursor:pointer; cursor:hand;width: 315px; height: 219px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpL4JOQLo5DjpCgWUmhSsuaELjWDIn7vPY-xuL_zJqbTftf6vFEYSGwoC1tFgaZSTLSaXSjxcoXsInZPtCI9b_Di9JIhYcZaSGk5U1VgrMy2vuGfSGEsEDeCPpLYRAjd3t-dQhHQVra-ti/s320/float+right.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5416615662073713282" /></a>

In the above image, the "css" image is floating on the right side.


Margins can be specified around an image with the help of <margin> property. <margin> can be used in a variety of ways. Generally, <margin> is specified with 4 values - top, right, bottom, left. The values are specifed either in pixels or percentages. margin can be loaded with only 2 values also - the first value represents top & bottom while the second represents left & right. <margin-left>, <margin-right>, <margin-top>, <margin-bottom> can be used individually to specify margins for each side individually.

Reference Links:
CSS: margin
CSS: float
img tag
CSS: display