How to add padding to a DIV

How to Add Padding to Div Tags in Dreamweaver

Key Takeaways

• Add space between your content and the edges of a div.

• Use the breadcrumbs to select the correct container before changing its properties.

• Fix an image dropping below a text box after adding padding.

• Keep footer content aligned without making the footer too wide.

Give Your Content Some Breathing Room

When text sits flush against the edge of a div, the layout feels cramped. In our example, the text needs more room on the left and a little more space between it and the neighbouring image on the right.

Padding creates that space inside the div. We’ll add 40 pixels on the left and 20 pixels on the right, then adjust the width so everything still fits.

1. Select the Text Div and Add Padding

Start by selecting the container itself, rather than just placing your cursor in a paragraph.

1. Click inside the text area you want to adjust.

2. In the breadcrumbs at the bottom of the document window, click the text div.

3. Check that the corresponding selector is selected in the Selectors panel.

4. Scroll through the Properties panel until you find the padding controls.

5. Enter 40 pixels for the left padding and press Enter.

6. Enter 20 pixels for the right padding and press Enter.

The text now sits away from the edges. When the div is selected, Dreamweaver’s shaded padding areas help you see the space added on either side.

Great, except there’s a small problem: the image that used to sit beside the text has dropped underneath it.

2. Fix the Width So the Image Fits Again

The image has moved because the text box now takes up more horizontal space. In this layout, the specified width applies to the content area, with padding added outside that measurement.

Our text div started at 700 pixels wide. Adding 40 pixels on the left and 20 pixels on the right makes it occupy 760 pixels, before accounting for any other spacing. There’s no longer enough room for its neighbour.

To keep the original 700-pixel footprint, subtract the combined horizontal padding from the width:

• Original width: 700 pixels.

• Left and right padding: 40 + 20 = 60 pixels.

• New content width: 700 − 60 = 640 pixels.

Select the text div again using the breadcrumbs. Find its width in the Properties panel, change it from 700 to 640 pixels, and press Enter.

Now the calculation is 640 + 40 + 20 = 700 pixels. The text has its breathing room, and the image fits beside it again.

The important habit: when adding horizontal padding to a fixed-width box like this one, check whether you also need to reduce its width.

3. Check Whether the Height Needs Adjusting

The text div’s height is set to auto. That means it can grow or shrink according to its contents rather than being held to a fixed pixel height.

For this example, there’s no fixed height to reduce when adding top or bottom padding. The box can expand vertically to accommodate the extra space. That’s different from the horizontal constraint we’ve just corrected.

4. Add Matching Padding to the Footer

The copyright text in the footer is also sitting too close to the left edge. We’ll move it inward by the same 40 pixels so it lines up neatly with the text above.

1. Click inside the footer.

2. Select the footer div in the breadcrumbs.

3. Find the padding controls in the Properties panel.

4. Set the left padding to 40 pixels.

This change may look less disruptive. The footer is the last div inside the container, so there isn’t another neighbouring element being pushed below it. But the added padding still makes the footer wider than intended.

Its original width is 1,024 pixels. Subtract the 40 pixels of left padding and set the width to 984 pixels.

That gives us 984 + 40 = 1,024 pixels overall. The footer content moves inward, while the box stays within its intended width.

Keep the Spacing and the Layout Working Together

Adding padding is straightforward once you keep track of the box’s total size. Select the correct div, add the internal spacing, then check its width and its neighbours. A quick width adjustment can give your content room to breathe without throwing the rest of the page out of alignment.

Key Terms

Div

An HTML container used to group content. Here, separate divs hold the text, image and footer content.

Padding

Space inside a box between its content and its edges. In this example, horizontal padding adds to the specified content width.

Breadcrumbs

The element-selection trail at the bottom of Dreamweaver’s document window. It helps you select the containing div rather than an element inside it.

Auto height

A height setting that allows a box to expand or contract with its content instead of using a fixed height.

FAQs

Why does my image drop below the text after I add padding?

In this layout, padding increases the text div’s total width. If the text and image no longer fit alongside one another, the image drops below. Reduce the text div’s width by the combined left and right padding to preserve its original footprint.

What width should I use for a 700-pixel div with 40 pixels of left padding and 20 pixels of right padding?

Set the content width to 640 pixels. Together with the 60 pixels of horizontal padding, it occupies the original 700 pixels in this example.

Does the footer width need adjusting even if nothing moves below it?

Yes, in this fixed-width example. Adding 40 pixels of left padding to a 1,024-pixel footer increases its total width, so reducing the content width to 984 pixels keeps it within the intended space.