Defining CSS style box properties

Defining CSS style box properties

Use the Box category of the CSS Rule Definition dialog box to define settings for tags and attributes that control the placement of elements on the page.

You can apply settings to individual sides of an element when applying padding and margin settings, or use the Same For All setting to apply the same setting to all sides of an element.

To define how elements are placed on the page:

  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Open the CSS Rule Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS rule.
    • Double-click an existing style to open it for editing in Code view or in the CSS Properties tab.
  3. In the CSS Rule Definition dialog box, select Box, and then set the style attributes you want.

    Leave any of the following attributes empty if they are not important to the style:

    Width and Height sets the width and height of the element.

    Float sets which side other elements, such as text, layers, tables and so on, will float around an element. Other elements wrap around the floating element as usual. The Float attribute is supported by both browsers.

    Clear defines the sides that do not allow layers. If a layer appears on the clear side, the element with the clear setting moves below it. The Clear attribute is supported by both browsers.

    Padding specifies the amount of space between the content of an element and its border (or margin if there is no border). Deselect the Same For All option to set the padding for individual sides of the element.

    Same For All sets the same padding attributes to the Top, Right, Bottom, and Left of the element to which it is applied.

    Margin specifies the amount of space between the border of an element (or the padding if there is no border) and another element. Dreamweaver displays this attribute in the Document window only when it is applied to block-level elements (paragraphs, headings, lists, and so on). Deselect Same For All to set the margin for individual sides of the element.

    Same For All sets the same margin attributes to the Top, Right, Bottom, and Left of the element to which it is applied.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Adding Content to Pages
Inserting and Formatting Text
Adding Audio, Video, and Interactive Elements
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly