How to work with Block Property

To work with Block Property

The Block tab of the CSS Selector Inspector lets you define the properties of the block (or box) generated by the current style, including its visual and no visual properties.

1. Sets invisible element margins.
   

2. Sets floating element position and size.
   

3. Sets distance between border and element content.
   

4. Formats element as a floating box. E. Clears or allows floating boxes on either side of the element.

To edit the block (box) properties of a style:

Step 1.

• Select a style in the Style Sheet window, and click the Block tab in the CSS Selector Inspector.

Step 2.

• To set the margins for a block (or box) element, choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and Bottom Margin text boxes.

• Or use the All Margins text box to specify the margin in all four directions at once. And then press Enter.

• You can also decrease the spacing between surrounding elements.

• Negative values cause two elements to overlap.

Step 3.

• In the Padding section, set the spacing between the border and the content of any element formatted with the current style.

• Choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and Bottom Padding text boxes.

• You can also specify the spacing in all four directions at once, use the All Pad-dings text box and then press Enter.

Step 4.

• Under Block, set the width and height properties for any element formatted with the current style. This property is most useful with referenced elements, such as images.

Step 5.

• In the Float pop-up menu, set the float property to create an element that is not part of the normal flow of text. Choose any of the following options:

  1. Left moves the element to the left, so the text wraps on the right side of the element.
     

  2. Right moves the element to the right, so the text wraps on the left side of the element.
     

  3. None causes the element to appear where it occurs in the text.

Step 6.

• In the Clear pop-up menu, specify how an element accepts floating elements.

  1. Left moves the element below any floating element on the left side.
     

  2. Right moves the element below any floating element on the right side.
     

  3. None allows floating elements on all sides.