More Attributes/Styles for Images

There are some more attributes and styles you will need for images besides the minimum src, height, width, and alt. This page shows some of the more useful ones.

float Images

The float style controls the spacial relationship of the image, the text it is grouped with, and the web page. You may float your image left or right. You may also use the position style with images, more on that later.

Images are inline elements, they can fit inside of paragraphs (and table cells) and flow along with the text like this small blue square small blue square graphic. Notice that the bottom of the image aligns with the baseline of the text, and the height of the image increases the line spacing for that line.

a generic image, 200 pixels wide and 100 pixels high

When left to its own devices, i.e. not in a paragraph or table, images line up on the left side of the page like the one above. An easy way to center an image in a column is to put it in its own center justified paragraph...

a generic image, 200 pixels wide and 100 pixels high
style="text-align:center"
used in the paragraph tag to center the image and text

This image uses style="float:left;". Image floated left It floats the image to the left of the page and text wraps on its right.

Succeeding paragraphs and other page elements will continue wrapping around the floated image unless a "clearing element" is used. Although any element can be styled to be a clearing element, the break tag is often used.

To clear the side of the image, use <br style="clear:left" /> or <br style="clear:both" />.


As you might expect, style="float:right;" image floated right moves the image to the right; text and other elements wrap around the left. Similarly, break tags are used to clear the image; <br style="clear:right" /> or <br style="clear:both" /">.


This image uses the style="vertical-align: top;" image for vertical-align:top attribute to give this result.

style="vertical-align: middle;" gives graphic text vertical-align:middle what you might expect.

Finally, style="vertical-align: bottom;" graphic text, vertical-align;bottom looks like this.

margin Styles

Sometimes your image may seem crowded by the text thus losing some if its impact. Use the margin style in the image tag to give the image "breathing room." margin styles can be applied to any side of the image to "push" away other content. Here are some samples.

An image using style="margin:0 20px 0 20px;". This gives twenty pixels of breathing room on both sides of the image. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

An image using style="margin:20px 0 20px 0;". This gives twenty pixels of breathing room top and bottom of the image. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

An image using style="margin:20px;". This gives twenty pixels of breathing room all around the image. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

An image using style="margin:20px 20px 20px 0; vertical-align: middle; float:left;". By combining the styles as needed, you can make the text flow around the image all the while maintaining a strong sense of alignment. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

border Styles

The border styles allows you to specify the size, color, and styling of the border around your image or eliminate it if you use an image as a hyperlink.

Here are a few examples showing differing borders around the same image: style="border:black solid 10px;" small square blue graphic,
style="border:orange inset 1em;" small square blue graphic,
and style="border:red dotted thin;" small square blue graphic.

Borders need three values to show up, color, style, and width. The width in numbers need a unit of measurement (px, em, and others) except for a width of zero.

When you use an image as a link, the browser adds the border around the image much like the underlining for text links. An example is this top graphic used as a link to the top of this page, it has no border attribute: graphic text, top

Use style="border:none;" to eliminate the tell tale link border: graphic text, top

bottom graphic for DM 60A pages