Visual aids

Microsoft Expression Web includes many visual aids you can use in Design view. Visual aids help you see empty or invisible elements and elements that have hidden borders. You can also use visual aids to find elements that have hidden or invisible styles, in addition to ASP.NET controls that aren't visible on a page. Finally, you can use visual aids to see which tags are used around specific content, and you can see the size of margins and padding around your tags.


Visual aids can change the appearance and layout of your page, so they should be turned off for your page to appear as close as possible to how it appears in a browser.

To show or hide a visual aid

With a web page open, do one of the following:

  • On the status bar, right-click Visual Aids and then click the visual aid.

  • On the View menu, point to Visual Aids, and then click the visual aid.

To show or hide all visual aids

With a web page open, do one of the following:

  • On the status bar, either double-click Visual Aids or right-click Visual Aids, and then click Show.

  • On the View menu, point to Visual Aids, and then click Show.

Visual aids

  • Block Selection   Shows in two different ways. When you put your cursor in a block, a dotted rectangle appears around the tag, with a tab displaying the name of the tag. You can click the tab to select the tag. When you select a block, margins and padding display. You can use the handles to resize margins and padding by using this visual aid. For absolutely positioned elements, you can click the tab displaying the name to move the object on the page.


    Block selection visual aids show for the following block elements: paragraph, list, list item, form, unpositioned div, address, block quote, horizontal line, and <center> tags. Other types of elements show the dotted rectangle and margin and resize handles even when visual aids are hidden.

    Cursor in a block element

    Selected block element

  • Visible Borders   Shows dotted borders around elements that have hidden borders.

    Visible borders in a table

  • Empty Containers   Shows a dotted rectangle around empty elements.


    In Design view, Expression Web collapses empty elements like most browsers do. When you turn on the Empty containers visual aid, empty elements will be displayed, which may change your page layout.

  • Margins and Padding   Shows the margins and padding around all elements: margins appear in red and padding appears in blue. You cannot use the Margins and padding visual aid to change margins and padding. Instead, turn on the Block selection visual aid and use the handles that appear. For more information, see Set margins, padding, and dimensions in Design view.

    Margin and padding for a block element

  • CSS Display:none Elements   Shows elements that are hidden by a style that includes display:none.

  • CSS Visibility:hidden Elements   Shows elements that are hidden by a style that includes visibility:hidden.

  • ASP.NET Non-visual Controls   Shows a rectangle for ASP.NET controls which don't display anything.

  • ASP.NET Control Errors   Shows an error message when an ASP.NET control encounters an error, such as not connecting to a data source.

  • Template Region Labels   Shows a border around editable template regions, including a tab with the name of the region, in pages based on Dynamic Web Templates or ASP.NET master pages. For more information, see Controlling page layout with Dynamic Web Templates.

    Template region label for a BODY element


See also

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

Community Additions