Show All

Setting margins, padding, and borders

Margins, padding, and borders are properties that you can modify for any element, and also for parts of elements, such as words and sentences. All of these properties can be specified differently for each side of an element.

  • Borders are lines surrounding an element. Borders come in various styles, widths (thicknesses), and colors.
  • Margins are empty space surrounding an element. Margins increase the distance between an element and its neighbors. If an element has a visible border, its margins take up space outside the border.
  • Padding is empty space between an element’s contents and its borders.

The relationships among margins, padding, and borders can be visualized through a floating box example:

This floating box has a 10-pixel border, 15-pixel padding on all sides, and a 20-pixel right margin.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The relationships among margins, padding, and borders

You can directly change the margins, padding, and borders of a particular paragraph, heading, or list item. You can also include these properties in a style that you apply to any element.

Namo Web Editor icon note Setting margins, padding, and bordersYou cannot directly modify margins, padding, or borders for elements other than paragraphs, headings, list items, and preformatted blocks. To modify these properties for another type of element, include the properties in a style and apply the style to the element.

Namo Web Editor icon reveal Setting margins, padding, and bordersTo directly set a paragraph’s margins and/or padding
  1. Place the insertion point in the desired paragraph.
  2. On the Document menu, go to Decorate, and then click Border Format.
  3. In the border selection box, select the side for which you want to set the margin and/or padding. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.

    Namo Web Editor 4.format.box.1 Setting margins, padding, and borders

    Namo Web Editor 4.format.box.2 Setting margins, padding, and borders

    Click a side to select it.

    Click while holding down Ctrl to select multiple sides.

  4. To set the margin, enter a number in the Margin box and then click the unit box next to it and select a unit. If you do not specify a unit, the value will be interpreted as pixels.
  5. To set the padding, enter a number in the Padding box and then click the unit box next to it and select a unit. If you do not specify a unit, the value will be interpreted as pixels.
  6. Repeat steps 3 through 5 if you want to set a different margin and/or padding value for another side.
  7. Click OK.
Namo Web Editor icon reveal Setting margins, padding, and bordersTo directly set a paragraph’s borders
  1. Place the insertion point in the desired paragraph.
  2. On the Document menu, go to Decorate, and then click Border Format.
  3. In the border selection box, select the side for which you want to set the border. To select multiple sides at once, click each while holding down the Ctrl key. (See the examples below.) To select all four sides, click Select All. To deselect all sides, click in the middle of the box. By default, all four sides are selected.

    Namo Web Editor 4.format.box.1 Setting margins, padding, and borders

    Namo Web Editor 4.format.box.2 Setting margins, padding, and borders

    Click a side to select it.

    Click while holding down Ctrl to select multiple sides.

  4. Click the Style box and select a border style.
  5. Click the Color box and select a color.
  6. In the Width box, enter a number and then click the unit box next to it and select a unit. If you do not specify a unit, the value will be interpreted as pixels.
  7. Repeat steps 3 through 6 if you want to set a different border for another side.
  8. Click OK.
Namo Web Editor icon reveal Setting margins, padding, and bordersTo include margin, padding, and border settings in a style
  1. On the Home menu, go to Style, and then click Define Styles.
  2. In the Styles list, select the style you want to modify. (Or create a new style.)
  3. Click the Borders & Background tab and specify values for the properties you want to include in the style. (See the instructions above for each type of property.)

Namo Web Editor icon tip Setting margins, padding, and bordersYou can set margins, padding, and borders all at the same time by specifying settings for each prope
rty before closing the Style dialog box.

Related topics

Style dialog box – Borders & Background tab

Setting character-related properties

Setting paragraph alignment, indentation, and line height

Setting background colors and images

Defining a style

Setting margins, padding, and borders