8/23/2021

Spacer Row

  1. Rowing Spacer Popper
  2. Spacer Rods

To change the row height of one row, drag the boundary below the row heading until the row is the height that you want. To change the row height of multiple rows, select the rows that you want to change, and then drag the boundary below one of the selected row headings. The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.

Creating extra space in your HTML on a web page can be achieved many ways depending on the type of space you want to create. The following sections contain many of the different ways to create extra space using both HTML and CSS. Foodiroquois.

Creating extra spaces before or after text

One of the most confusing things to new users who're creating a web page is that they cannot press the spacebar multiple times make additional spaces. To create extra spaces before, after, or in-between your text, use the   (non-breaking space) extended HTML character.

For example, with 'extra space' we have the following code in our HTML.

Note

If you are using a WYSIWYG editor to enter the code above, you must be in the HTML tab or editing the HTML code.

Tip

For a list of extended special HTML characters, see: Full listing of extended special HTML characters.

Keep spacing in text that is pasted into a page

If you are pasting text with extra spaces or tabs, you can use the HTML <pre> tag to keep the text formatted. Below is an example of how to paste text with extra spaces using the <pre> tag.

The example above is done using the below HTML code.

Rowing Spacer Popper

  • See our HTML <pre> tag page for further information on this tag.
Note

If you are using a WYSIWYG editor to enter the code above, you must be in the HTML tab or editing the HTML code.

Spacer Row

Creating extra space around an element or object

Any HTML element can have additional spacing added to the top, right, bottom, or left. However, make sure you understand the difference between margin and padding before deciding the type of space you want to add around the element or object. As seen in the picture below, padding surrounds the element, within the border, and the margin outside the border.

The example below shows our paragraph surrounded by a border, indented with a margin, and with spacing on the right and bottom.

An example of a paragraph with margin and padding.

The example above was created using the code below.

In the first section of the code, 'margin-left: 2.5em;' adds a left margin of 2.5 em, which gives the appearance of indented text. As shown by the example, this spacing is outside of the border. In the next section, 'padding: 0 7em 2em 0;' is defining the top, right, bottom, and left (clockwise) padding. There is '0' top padding, '7em' right padding, '2em' bottom padding, and 0 left padding. The remainder of this example is defining how the border should look.

Creating a tab using CSS and HTML

A tab can be created in HTML by adjusting the left margin of an element. For example, this paragraph has a left margin of 2.5 em from the element containing the text. The CSS to create this left margin is shown below.

After placing this code in our CSS file, we can apply the 'tab' class to any text to create the appearance of a tab. The value of the margin-left can be increased or decreased depending on your needs.

Although we recommend the method above, the margin-left CSS can also be added inline as shown in the example below.

An example of a 5em left margin.

Spacer Rods

Add space below a line or paragraph of text

If you need to add extra space below a line or paragraph of text, and only need to do it once, you can use the <br> tag. Below is an example of how this technique can be applied.

The code above creates the text shown below.

This sentence contains example text.
As you can see, two breaks add the space above.

Additional breaks can be added if needed. However, we suggest using the CSS method mentioned earlier to add padding and spacing around your text if being done in multiple places on a page.

Additional information

  • See our white space definition for further information and related links.