Setting Block properties


    The Block set Block set of the CSS  Inspector lets you define the dimensions of the item's area. Some of the properties in this set are not consistently supported across browsers and platforms. Be sure to test your pages on multiple browsers, browser versions, and platforms.

    For more information on units, see About relative, absolute, and percentage units.

    Illustration of Block set of CSS Inspector with these callouts: A. Sets invisible margins around the style item B. Sets floating style item position and size C. Sets distance between border and style item D. Formats style item as a layer E. Clears or allows layers on either side of the style item
    Block set of CSS Inspector A. Sets invisible margins around the style item B. Sets floating style item position and size C. Sets distance between border and style item D. Formats style item as a layer E. Clears or allows layers on either side of the style item

    Cascading style sheets are based on a simple block-oriented formatting model. Each item that hosts a style consists of one or more rectangular blocks, each of which has a core content area with optional surrounding padding, border, and margin areas. (Use the Margin and Padding Properties set to format surrounding areas.) This formatting model gives you much more flexibility in controlling spacing between objects.

    Illustration of Cascading style sheet block properties with these callouts: A. Block width B. Margin (transparent) C. Border D. Padding E. Content F. Element width
    Cascading style sheet block properties A. Block width B. Margin (transparent) C. Border D. Padding E. Content F. Element width

To edit the block properties of a style:

  1. Select a style in the CSS Editor and click the Block set Block set of the CSS Inspector.
  2. Specify the Width and Height properties for any item formatted with the current style by doing one of the following:
    • Choose a unit of measurement from either the Width or Height Units menu, and enter a value in the text box. Leave one dimension set to Auto to ensure that the item scales proportionally.
    • Leave both Width and Height set to Auto to display the referenced item in its original size.

    Note: Setting Width and Height is most useful with replaced elements, such as images.

  3. In the Float menu, the float property creates a style item that is not part of the normal flow of text. Choose any of the following options:
    • Left moves the style item to the left, so the text wraps on the right side of it.
    • Right moves the style item to the right, so the text wraps on the left side of it.
    • None causes the style item to appear where it occurs in the text.
  4. In the Clear pop-up menu, specify how an element accepts floating elements.
    • Left moves the element below any floating element on the left side.
    • Right moves the element below any floating element on the right side.
    • Both does not allow floating elements on either side.
    • None allows floating elements on all sides.
  5. In the Visibility menu, specify whether the element should be visible, hidden, or inherited.