Add Margins and Padding to page elements in Easy steps with Microsoft Expression Web 2

We have been writing CSS rules to set margins and padding to page elements and then previewing them in the browser to check if that looks fine. But with Microsoft Expression Web set your margins and padding in easy steps and preview it right away. Here is how you can do that.

1.       Switch to Design view.

2.       Go to View menu > Visual Aids > Choose Show

3.       Again go to the View menu > Visual Aids > Choose Block Selection

4.       Place your cursor on the element and then click on that element from the Visual Aids tab displayed at the top of it. Let us take an example to make things more clear. Click on the visual aid tab ‘p’ to select a <p> tag. See image below for more details.

5.       Alternatively, place your cursor in ‘p’ and then see the <p> tag highlighted in orange in the top bar. Click on the small arrow next to the selected tag and choose ‘Select Tag’ from the menu.

6.       Now you can see the entire tag is selected. All you have to do is, place your cursor on the borders of the element (notice the cursor changes to a handle) and drag the cursor handle in and out to set your margin. The tool tip would display the value for the margin.

7.       To set padding for an element, hold down the SHIFT key and drag the handle like you did earlier.

 

You can set margin and padding to an image in a similar way. Wasn’t that simple!