Set margins, padding, and dimensions in Design view

You can quickly add or remove width or height, or both properties for a block-level item by double-clicking a square resize handle  on the selected item. You can also quickly set the margin and padding of any side of a block-level item by dragging the edge of an item or one of the line handles that extend from each corner of the selected item in Design view.

Margin on the left side of a picture

The resize handles appear in the middle of the right and bottom sides, and the lower right corner of a selected block-level item. You set margins by dragging an edge of an item or using the pink margin handles and set padding by pressing SHIFT and dragging the edge of an item or using the blue padding handles. The margins of an item appear shaded in pink and padded areas appear shaded in blue. As you drag, the new margin appears shaded in orange and the new padding appears shaded in green.

You can use these techniques on pictures, tables, layers, applets, inline frames, and block-level items, which include paragraphs, headings (<h1>, <h2>, and so on), lists and list items, forms and form elements, unpositioned divs, address tags, block quote tags, horizontal lines, and <center> tags. When you use any of these techniques, Microsoft Expression Web produces the formatting for you by creating either an inline style or a style that uses a class selector, depending on the associated style application settings. To modify these settings, see Set preferences for generated CSS.

The handles appear when you select the item or after you select a block-level item and then select one of the following: the dotted border that surrounds the item's block; the item's block-level tab, which appears at the top of the item in Design view; or the item's tag in the Quick Tag Selector bar. For example, if you click a picture, the handles appear immediately; if you select a block-level item, such as paragraph, the handles don't appear until you click the "p" block-level tab on the paragraph, click on the dotted line that appears around the paragraph's block, or click the paragraph's <p> tag in the Quick Tag Selector bar. In addition, you can't see the handles or the margin and padding shading of block-level items unless Block Selection is selected on the Visual Aids submenu on the View menu.

To set the margin, padding, or dimensions of a block-level item

1. In Design view, in your web page, select the item.

   Line handles and resize handles extend from each corner of the item. If handles don't appear, do one or more of the following.

   • If you selected a block-level item, on the View menu, point to Visual Aids, and then click Show. On the View menu, point to Visual Aids again, and then click Block Selection.

   • Click the dotted line that surrounds the item's block.

   • Click the visual aid tab at the top of the item.

   • Click the item's tag in the quick tag selector bar at the top of the editing window.

2. Do one or more of the following:

   • To set a margin, drag either the pink margin handle or the edge on the side you want.

   • To set padding, press and hold SHIFT, and then drag either the blue padding handle or the edge on the side you want.

   • To add or remove only the width property, double-click the resize handle on the right side of the item.

   • To add or remove only the height property, double-click the resize handle on the bottom of the item.

   • To add or remove the width and height properties, double-click the resize handle on the lower right corner of the item.

See also

Tasks

Set border, padding, and background properties
Aligning text

Reference

Quick Tag Selector

Concepts

Working with generated cascading style sheets
Visual aids
Cascading style sheet reference

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.