Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS styles. With Inspect mode turned on, you can hover over elements on your page to see the CSS box model attributes for any block-level element.

In addition to seeing a visual representation of the box model in Inspect mode, you can also use the CSS Styles panel as you hover over elements in the Document window. When you have the CSS Styles panel open in Current mode and hover over an element on the page, the rules and properties in the CSS Styles panel automatically update to show you the rules and properties for that element. Additionally, any view or panel related to the element you’re hovering over updates as well (for example, Code view, the Tag selector, the Property inspector, and so on).

1. With your document open in the Document window, click the Inspect button (next to the Live View button in the Document toolbar).

   Note: If you’re not already in Live view, Inspect mode automatically enables it.

2. Hover over elements on the page to see the CSS box model. Inspect mode highlights different colors for the border, margin, padding, and content.

3. (Optional) Press the left arrow on your computer keyboard to highlight the parent of the currently highlighted element. Press the right arrow to return to highlighting for the child element.

4. (Optional) Click an element to lock a highlight selection.

   Note: Clicking an element to lock a highlight selection turns off Inspect mode.

Adobe recommends		Have a tutorial you would like to share?
	Dreamweaver CS5 - CSS Inspect Scott Fegette, Dreamweaver Product Manager Video tutorial taking you through CSS Inspect

Previewing pages in Dreamweaver

The CSS Styles panel