CSS Spacing

In this article, we will discuss CSS spacing. Spacing is important in CSS, as the amount of space tells how elements are related to each other.

There are many ways in which we can give space in CSS:

Padding

Padding is the CSS property that is used to add space inside an HTML element. It adds space around an element, which means space can be given to the left, right, top, and bottom sides of the element. The padding property takes four values.

Syntax of shorthand padding property:

The "padding" mentioned above in the syntax is the shorthand property of padding, which takes all four values.

Syntax of individual padding properties:

The length unit in the above syntax can be in cm, px, etc.

Demonstration 1:

We will use the shorthand property of padding in this demonstration.

Code:

Output:

We can see the padding at the top, right, bottom, and left side of the paragraph element.

Demonstration 2:

We will use all four individual properties of padding in this demonstration.

Code:

Output:

We can witness the padding-top, padding-right, padding-bottom, and padding-left in paragraph 1, paragraph 2, paragraph 3, and paragraph s4.

Margins

The next CSS property is the "margin" which provides space around HTML elements.

Syntax of shorthand margin property:

Margin: top right, bottom left;

The "margin" mentioned above in the syntax is the shorthand property of margin, which takes all four values.

Syntax of individual margin properties:

The length unit in the above syntax can be in px, cm, etc.

Demonstration 1:

We will use the shorthand property of margin in this demonstration.

Code:

Output:

The margins at the top, right, bottom, and left sides of the paragraph element are visible.

Demonstration 2:

We will use all four individual properties of margin in this demonstration.

Code:

Output:

Here is the output where we can witness the margin at the top, right, bottom, and left side of the paragraph element.

Letter-spacing

This CSS property provides space between the letters. It can take both positive and negative values.

Syntax:

Demonstration:

We are going to utilize the letter-spacing CSS property to provide spacing between characters.

Code:

Output:

We can witness two sentences in the output that have letter spacing between them.

Word-spacing

This CSS property is utilized to provide space between the words.

Syntax:

Demonstration:

We will utilize the word-spacing CSS property to provide spacing between words in this illustration.

Code:

Output:

Here is the result in which we can witness two sentences that have word spacing between them.

Line-height

The line-height CSS property is utilized to give height space between the lines.

Syntax:

Illustration:

We will utilize the line-height CSS property to permit spacing between lines in this demonstration.

Code:

Output:

Here is the output where we can witness two paragraphs that have height spacing between lines.

Whitespace

This CSS property is used to set whitespace inside the element.

Syntax:

The "whitespace" is the CSS property in the above syntax. It has various values, which are described below:

• Normal: It is the default value in which whitespaces are collapsed into a single whitespace.
• Pre: It is used to preserve all whitespace. It wraps text on line breaks.
• Pre-wrap: It is used to wrap text when required and on line breaks.
• Nowrap: Whitespaces are collapsed into a single whitespace
• pre-line: It is used to collapse whitespaces into a single whitespace, wraps text when required, and on-line breaks.
• Initial: It sets the default value.
• Inherit: It is used to inherit the parent property.

Demonstration:

We are going to utilize the whitespace CSS property to set extra whitespaces between lines in this demonstration.

Code:

Output:

Here, in the output below, we can witness that there are 4 paragraphs in which paragraph 1, paragraph 3, and paragraph 4 demonstrate a single whitespace between words, but paragraph 2 shows two whitespaces.

Text-indent

The text-indent CSS property is utilized to give space to the first line.

Syntax:

Demonstration:

We are going to utilize the text-indent CSS property to give a gap at the start of the first line of the paragraph in this demonstration.

Code:

Output:

Here is the demonstration's output given downward, in which we can witness the text indentation in the first line of the two paragraphs.

Grid-row-gap and Grid-column-gap

The grid-row-gap CSS property sets a gap between rows in a grid, and the grid-column-gap CSS property sets a gap between columns in a grid.

Syntax:

Demonstration:

In this instance, we utilize both the grid-row-gap and grid-column-gap CSS properties to set a gap between rows and columns in a grid.

Code:

Output:

A gap of 24px between rows and columns in a grid can be noticed here in the output given downward.

Grid-gap

The grid-gap is called the shorthand property, which is utilized to construct a space between rows and columns in a grid.

Syntax:

Illustration:

We will utilize the grid-gap CSS property to set a gap between rows and columns.

Code:

Output:

A gap of 15px between rows and columns can be witnessed here in the output given below.

Conclusion

We have comprehended the CSS spacing in this article. We have comprehended different spacing in CSS, which are given downward:

• Padding: It is used to provide space around an HTML element.
• Margin: It is utilized to provide margin around an HTML element.
• Letter-spacing: It is utilized to give space between the letters.
• Word-spacing: It is utilized to give space between the words.
• Line-height: It is utilized to give space between the lines.
• Whitespace: It is utilized to give whitespace inside an element.
• Text-indent: It is utilized to give space before the first line.
• Grid-row-gap: It is utilized to give space between the rows.
• Grid-column-gap: It is utilized to give space between the columns.
• Grid-gap: It is utilized to give space between the rows and columns.