CSS Spacing
CSS is all about presentation. Discover how CSS Spacing works to transform plain HTML into a premium user experience in the guide below.
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:
Padding: top right, bottom left;
The "padding" referred to in the syntax above represents the shorthand property for defining padding, encompassing four values at once.
Syntax of individual padding properties:
padding-top: length;
padding-right: length;
padding-bottom: length;
padding-left: length;
The measurement unit in the preceding syntax may be specified as centimeters (cm), pixels (px), and so forth.
Demonstration 1:
We will utilize the abbreviated padding property in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding shorthand property</title>
<style>
p {
padding: 30px 35px 45px 50px;
border: 1px dashed red;
background-color: rgb(247, 191, 191);
}
</style>
</head>
<body>
<h2>Padding Shorthand Property</h2>
<p>This is the paragraph element which has <br> 30px padding at top, <br> 35px padding at right, <br> 45px padding at bottom and <br> 50px padding at left.</p>
</body>
</html>
Output:
We observe the padding on all four sides of the paragraph element: top, right, bottom, and left.
Demonstration 2:
We will utilize all four separate attributes of padding in this illustration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding individual properties</title>
<style>
.para1 {
padding-top: 42px;
border: 1px dashed rgb(255, 170, 0);
background-color: rgb(242, 209, 143);
}
.para2 {
padding-right: 36px;
border: 1px dashed rgb(255, 170, 0);
background-color: rgb(242, 209, 143);
}
.para3 {
padding-bottom: 54px;
border: 1px dashed rgb(255, 170, 0);
background-color: rgb(242, 209, 143);
}
.para4 {
padding-left: 24px;
border: 1px dashed rgb(255, 170, 0);
background-color: rgb(242, 209, 143);
}
</style>
</head>
<body>
<h2>Padding Individual Properties</h2>
<p class="para1">This is the paragraph element which has <br> 42px padding at top.</p>
<p class="para2">This is the paragraph element which has <br> 36px padding at right.</p>
<p class="para3">This is the paragraph element which has <br> 54px padding at bottom.</p>
<p class="para4">This is the paragraph element which has <br> 24px padding at left.</p>
</body>
</html>
Output:
We can observe the padding-top, padding-right, padding-bottom, and padding-left in the first paragraph, second paragraph, third paragraph, and fourth paragraph.
Margins
The following CSS attribute is the "margin" that offers spacing surrounding HTML elements.
Syntax of shorthand margin property:
Margin: top right, bottom left;
The "margin" referred to in the syntax above is a shorthand property for setting the margin on all four sides of an element.
Syntax of individual margin properties:
margin-top: length;
margin-right: length;
margin-bottom: length;
margin-left: length;
The measurement unit in the preceding syntax may be specified in pixels (px), centimeters (cm), and other options.
Demonstration 1:
We will utilize the abbreviated form of the margin property in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin</title>
<style>
div {
margin: 50px 55px 60px 75px;
border: 1px solid #70d373;
}
</style>
</head>
<body>
<h2>CSS Margin when all four sides are equal</h2>
<div>This element has a margin of 60px.</div>
<h2>CSS Margin when all four sides are different</h2>
<div>This element has a 50px margin at top, <br> 55px margin at right, <br> 60px margin at bottom and <br> 75px margin at left.</div>
</body>
</html>
</body>
</html>
Output:
The margins on all four sides of the paragraph element are displayed.
Demonstration 2:
We will utilize all four separate attributes of the margin in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin individual properties</title>
<style>
.para1 {
margin-top: 50px;
border: 1px dashed rgb(3, 52, 42);
background-color: rgb(188, 249, 237);
}
.para2 {
margin-right: 65px;
border: 1px dashed rgb(3, 52, 42);
background-color: rgb(188, 249, 237);
}
.para3 {
margin-bottom: 45px;
border: 1px dashed rgb(3, 52, 42);
background-color: rgb(188, 249, 237);
}
.para4 {
margin-left: 39px;
border: 1px dashed rgb(3, 52, 42);
background-color: rgb(188, 249, 237);
}
</style>
</head>
<body>
<h2>Margin Individual Properties</h2>
<p class="para1">This is the paragraph element which has <br> 50px margin at top.</p>
<p class="para2">This is the paragraph element which has <br> 65px margin at right.</p>
<p class="para3">This is the paragraph element which has <br> 45px margin at bottom.</p>
<p class="para4">This is the paragraph element which has <br> 39px margin at left.</p>
</body>
</html>
Output:
Here is the result where we can observe the space at the top, right, bottom, and left of the paragraph container.
Letter-spacing
This CSS attribute adds spacing between characters and accepts positive and negative values.
Syntax:
letter-spacing: length;
Demonstration:
We will leverage the letter-spacing CSS property to add space between individual characters.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>letter-spacing</title>
<style>
.letter1 {
letter-spacing: 10px;
}
.letter2 {
letter-spacing: 6px;
}
</style>
</head>
<body>
<h2>letter-spacing</h2>
<p class="letter1">This sentence has a gap of 10px between characters.</p>
<p class="letter2">This sentence has a gap of 6px between characters.</p>
</body>
</html>
Output:
We can observe two sentences in the result with letter spacing separating them.
Word-spacing
This CSS attribute is used to create gaps between words.
Syntax:
word-spacing: length;
Demonstration:
We will make use of the word-spacing CSS attribute to add space between words in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>word-spacing</title>
<style>
.word1 {
word-spacing: 12px;
}
.word2 {
word-spacing: 5px;
}
</style>
</head>
<body>
<h2>word-spacing</h2>
<p class="word1">This sentence has a gap of 12px between words.</p>
<p class="word2">This sentence has a gap of 5px between words.</p>
</body>
</html>
Output:
Here is the outcome where we can observe two sentences separated by word spacing.
Line-height
The line-height CSS attribute is employed to provide vertical space between lines of text.
Syntax:
line-height: length;
Illustration:
We will employ the line-height CSS attribute to allow for vertical spacing between lines in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>line-height CSS property</title>
<style>
.line1 {
line-height: 15px;
}
.line2 {
line-height: 36px;
}
</style>
</head>
<body>
<h2>line-height CSS property</h2>
<h3>First paragraph</h3>
<p class="line1">The lines of this paragraph consist of a height space of 15px between lines. The lines of this paragraph hold a height space of 15px between lines.</p>
<h3>Second paragraph</h3>
<p class="line2">The lines of this paragraph holds a height space of 36px between lines. The lines of this paragraph consist of a height space of 36px between lines.</p>
</body>
</html>
Output:
Here is the result displaying two paragraphs separated by vertical space.
Whitespace
This CSS attribute is employed to define the spacing within the element.
Syntax:
white-space: normal| pre| pre-wrap| nowrap| pre-line| initial| inherit;
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 will employ the whitespace CSS attribute to adjust the amount of white space between lines in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>white-space</title>
<style>
.white1 {
whitespace: normal;
}
.white2 {
whitespace: pre;
}
.white3 {
whitespace: nowrap;
}
.white4 {
whitespace: wrap;
}
</style>
</head>
<body>
<h1>white-space</h1>
<h3>Paragraph 1</h3>
<p class="white1">This paragraph demonstrates the normal whitespace.</p>
<h3>Paragraph 2</h3>
<p class="white2">This paragraph displays the pre whitespace.</p>
<h3>Paragraph 3</h3>
<p class="white3">This paragraph demonstrates the nowrap whitespace.</p>
<h3>Paragraph 4</h3>
<p class="white4">This paragraph is displaying the wrap whitespace.</p>
</body>
</html>
Output:
Here, in the displayed output, we can observe that there are 4 paragraphs where the first, third, and fourth paragraphs exhibit a single space between words, while the second paragraph displays two spaces.
Text-indent
The text-indent CSS attribute is used to create an indentation for the initial line of a paragraph.
Syntax:
text-indent: length;
Demonstration:
We will be employing the text-indent CSS attribute to create a space at the beginning of the initial line of the paragraph in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>text-indent CSS property</title>
<style>
.text1 {
text-indent: 50px;
}
.text2 {
text-indent: 100px;
}
</style>
</head>
<body>
<h2>text-indent CSS property</h2>
<p class="text1">This sentence contains a space of 50px in the first line. This sentence contains a space of 50px in the first line.</p>
<p class="text2">This sentence holds a height space of 100px in the first line. This sentence consists of a height space of 100px in the first line.</p>
</body>
</html>
Output:
Here is the result of the demonstration displayed below, showcasing the text alignment in the initial line of both paragraphs.
Grid-row-gap and Grid-column-gap
The grid-row-gap CSS attribute establishes a space between rows within a grid layout, while the grid-column-gap CSS property defines a space between columns in the grid system.
Syntax:
grid-row-gap: length;
grid-column-gap: length;
Demonstration:
In this case, we make use of both the grid-row-gap and grid-column-gap CSS attributes to establish spaces between rows and columns within a grid layout.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>grid-row-gap and grid-column-gap CSS property</title>
<style>
body {
margin: 20px;
background-color: #e3ccf7;
}
.item {
background-color: #ac6ee2;
color: #e3ccf7;
padding: 30px;
font-size: 20px;
}
.grid {
width: 42px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-row-gap: 24px;
grid-column-gap: 24px;
grid-template-rows: auto auto auto auto;
grid-auto-flow: column;
}
</style>
</head>
<body>
<h1>grid-row-gap and grid-column-gap CSS property</h1>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
</body>
</html>
Output:
A distance of 24 pixels between rows and columns within a grid is observable in the output displayed below.
Grid-gap
The grid-gap shorthand property is used to create a gap between rows and columns within a grid layout.
Syntax:
grid-gap: length;
Illustration:
We will use the grid-gap CSS attribute to establish space between rows and columns.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>grid-gap CSS property</title>
<style>
body {
margin: 36px;
background-color: #d1f7bf;
}
.item {
background-color: #89e95d;
color: #d1f7bf;
padding: 36px;
font-size: 24px;
}
.grid {
width: 50px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 15px;
grid-template-rows: auto auto auto auto;
grid-auto-flow: column;
}
</style>
</head>
<body>
<h1>grid-gap CSS property</h1>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
</body>
</html>
Output:
A margin of 15 pixels is evident between rows and columns in the displayed output 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.
