How to: Change Padding and Margins in Design View

You can control how page elements appear on the page by setting margins, which control the space beyond the border of the page element. Margins affects how close two adjacent page elements are to each other. You can also set padding, which controls the space between the content of the page element and the element's border. For example, padding affects how close a paragraph is to the border of the element that contains it.

The effect of padding and margins on page elements is defined by the CSS box model. For more information, search for "CSS box model" on the World-Wide Web Consortium Web site.

To set the margins or padding for an element

1. In Design view, select a page element by clicking the element's tab. Alternatively, click the element in the quick tag selector, which is located in the lower section of the Design window.

   

2. To change the margin for a page element, position the pointer over one of the borders of the element, until the pointer becomes a two-headed arrow. (You must position the pointer away from the resizing handles or the corners.) To change the padding, hold the SHIFT key while you position the mouse pointer.

   

   Note:
   Make sure that you see the double-headed arrow, not the four-headed arrow used to move the page element.

3. To change the margin, drag down on the top or bottom of an element, or drag left on the left or right side of an element. To change the padding, hold the SHIFT key while dragging.

   The location of the pointer determines what direction you drag to change the padding or margins. For example, if you position the pointer on the top border of an element, you drag down (not up) to increase the margin value.

See Also

Tasks

Walkthrough: Creating and Modifying a CSS File

Concepts

Working with CSS Overview