Image Padding in Dreamweaver

    ●   Add Padding to your images.

Learn About:

Padding Float
Image Maps Alt tags

  •   This tutorial is part of the What in the World? - Fan-Tastic, and Art Genre Projects.

  •   It is part of a series: 42_float_Dw.htm, 174_img_padding_Dw.htm, 66_img_border_Dw.htm, and 180_img_resize_Dw.htm

Image Padding ~

The Rubric says: "Floats used to align elements."

It also says: "Margin and Padding used to add spaces between text, images, and containers."

  ●   Use Floats and Margins and Padding to ensure you meet these requirements.

Step #1: Open your Project in Dreamweaver ~

Open your page in Dreamweaver – or any page with a picture …

… and select the image.

select image

Step #2: In-Line CSS ~

Find the code for the images in Split view …

… and type a space before the closing /> tag, type   s   t   y    and watch for the code hints to pop up …

… so it looks like this:

Step #3: Float ~

Click between the parentheses …

… and type the letter f to bring up the code hints again select float …

… and select left or right depending on which side of the div you want your image.

style float left

Step #4: So What?

Now you can type text next to the image and it will "float" next to it …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #5: Padding ~

The Rubric also says: "Margin and Padding used to add spaces between text, images, and containers."

Step #6: A Better Way ~

The best way to add padding is to make 1 global rule in your CSS document that that applies to all your images, which might look something like this:

Content img

Step #7: Locate the div ~

Find the div your image is located in by clicking on the line that contains it …

… and take note of the div name.

Step #8: Open your CSS document ~

Scroll down to the bottom of your CSS code and click there …

Step #9: Insert the CSS ~

Copy and paste this code …

#content img { 
     padding: 10px;


Of course you must modify your code for your individual needs:

Content img

Last Step: Save and Upload your site ~

Upload your site with the work you completed, attach the link to your site where the work is located …


… and continue working …