I chose 5 pixels because it’s what looked best to me. To prevent text from crowding the image I applied 5 pixels of padding to the left-side of the image. As you can see in figure 2 some of my text is actually crowding the image because I did not specify any padding. This is called padding (the invisible space around the image). This is the fastest and easiest way to quickly add an image to a paragraph but sometimes it’s nice to add a little space between text and images. Below is the image markup with the style applied in red. I made the image align to the right of the text allowing the paragraph to wrap around the image. The example below shows an image aligned to the right of a text paragraph. First though, lets look at what I am trying to achieve visually. WRAP TEXT METHOD #1: The CSS image float methodĪll this method really requires is that you add a style to your image tag. I recommend you try the steps provided here first. There are other ways in HTML to wrap text around images but they require the use of tables or have limitations. Even when I don’t use a caption for an image I use this as my preferred method in case I want to add a caption in the future. I prefer this method because it allows you the option to place captions above or below an image.

The div can then be set to make your text wrap around it. This method utilizes a div to contain your image. The second method, explained on page 2, is the CSS div float method.

This method is used to align a stand-alone image with a paragraph of text where no captions are necessary to accompany the image. The first method explained below is the CSS image float method. Here, two methods are explained for wrapping text around images in CSS.

Text on image html css