What is the use of negative margin in CSS?

Negative margins are used to reduce the space between the elements. It can also be used to overlap contents.

How can you set the values of all the four margins in one property?

Margin property is a shorthand property for the individual margin properties: top, bottom, left and right. So, it is used to set all four margins in one declaration.

CSS Spacing

Introduction

In this article, we will learn all about CSS spacing. We will see the different ways to achieve spacing in CSS and when to use each of them.

CSS spacing is an important aspect of website design as without proper spacing; it would be difficult to skim a web page and relate the elements.

You will learn how to select the best option for spacing elements in this article.

Recommended Topic, Difference Between CSS and SCSS

HTML spacing

There are some methods in HTML to space elements. The tags <hr> and <br> can space the elements in the top to bottom direction.

<br> tag is used to insert a line break in HTML, which is equivalent to enter key in a word processor while <hr> tag inserts a horizontal line along with space on both the top and bottom sides.

Example:

<p>This paragraph has a HTML line<br />break in it (between "line" and "break"). This is using a <code>&lt;br /&gt;</code> element.</p>
  <hr />
  <p>You can also use a <code>&lt;hr /&gt;</code> element, which provides a horizontal line and some margin.</p>

Output:

Margin

You can use margin property to add space on the outer side of an element. Under this, we have margin-top, margin-bottom,margin-right and margin-left. So, you can set a margin on all four sides of an element.

Following are the values of all the margin properties:

auto - The margin is calculated by the browser.
length - It specifies a margin in px, pt, cm, etc.
% - It specifies a margin in terms of the percentage of the width of the containing element.
inherit - It specifies that the margin properties will be inherited from the parent element.

Example:

<html>
<head>
<style>
div {
  border: 2px solid black;
  margin-top: 50px;
  margin-bottom: 100px;
  margin-right: 200px;
  margin-left: 100px;
  background-color: pink;
}
</style>
</head>
<body>

<h2>Demonstrating the Margin Properties</h2>

<div>This div element has a top margin of 50px, a right margin of 200px, a bottom margin of 100px, and a left margin of 100px.</div>

</body>
</html>

Output:

The margin is the shorthand property for the following individual margin properties:

margin-top
margin-right
margin-bottom
margin-left

These are applied as follows:

If one value is supplied, then it gets applied to all four sides. Eg- margin: 15px
If two values are supplied, the first value is applied to the bottom and top margin, while the second is applied to the left and right margin. Eg- margin: 15px 30px;
If three values are given, the first is for the top margin, the second is for the left and right margin, and the third is for the bottom margin. Eg- margin: 15px 30px 45px;
If four values are given, the first is for the top margin, the second is for the right, the third is for the bottom margin, and the fourth is for the left margin.

Eg- margin: 15px 30px 45px 60px;

Negative margin

Negative values can also be assigned to the margin. When the value is positive, space is added between the elements, so the space is reduced when the value is negative.

Example:

<html>
<head>
<style>
h2 {
  border: 1px solid black;
  margin: 30px 50px 75px 100px;
  background-color: pink
  ;
}

h2.c1
{
 
  margin: 25px 50px 75px 100px;
  background-color: pink
  ;
}
</style>
</head>
<body>
<h2>margin: 25px 50px 75px 100px</h2>
<h2 class="c1">margin: 25px 50px 75px 100px</h2>
</body>
</html>

Output:

Adding negative margin to second block:

h2.c1
{
 
  margin: -60px 50px 75px 100px;
  background-color: pink
  ;
}

In the above code, only this block of code is changed.

Output:

Compare this output with the previous one to see the difference and understand the use of negative margin.

Margin collapse

There are some instances where two margins collapse into a single margin.

And it happens only for top and bottom margins and not for right and left margins.

Sometimes, the top and bottom margins collapse into a single margin equal to the larger of the two.

Let’s look at an example to understand this:

h1 {
margin-bottom: 2rem;
}

p {
margin-top: 3rem;
}

There are two elements: heading and paragraph having vertical margins applied on them. It appears that the margin between the heading and paragraph will be 5rem, but due to margin collapse, the actual margin is 3rem.

Preventing margin collapse

To prevent margin collapse, you can make the element’s position property absolute, like this - position: absolute.

Also, if an element with no margin exists between two elements with block margin, then margin collapse does not occur. This happens because two elements with block margins are not adjacent siblings.

CSS Text Spacing

Text Indentation

The text-indent property is used to specify the indentation, i.e. the amount of horizontal space by which text should be moved before the beginning of the first line of text.

Example-

<html>
<head>
<style>
div.a {
  text-indent: 80px;
}

div.b {
  text-indent: 40%;
}

div.c {
  text-indent: -5em;
}

</style>
</head>
<body>

<h1>CSS Text-Indentation </h1>

<h2>text-indent: 80px</h2>
<div class="a">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: 40%</h2>
<div class="b">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: -5em</h2>
<div class="c">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body>
</html>

Output-

Letter Spacing

The letter-spacing property is used to define the space between the characters of a text.

Example-

h2 {
  letter-spacing: 5px;
}

h3 {
  letter-spacing: -2px;
}

Output-

Word Spacing

The word spacing between the text is specified by the word-spacing property.

Example-

<html>
<head>
<style>
p.large {
  word-spacing: 12px;
}

p.small {
  word-spacing: -5px;
}
</style>
</head>
<body>


<p>Normal word spacing</p>

<p class="large">Larger word spacing</p>

<p class="small">Smaller word spacing</p>

</body>
</html>

Output-

White Space

The white-space property is used to specify the handling of white space inside an element.

Example-

p {
  white-space: nowrap;
}

Line Height

It is used to specify the space between the lines.

Example-

p.small {
  line-height: 0.8;
}

p.large {
  line-height: 2;
}

CSS Padding

CSS padding property specifies the space to generate around an element.

Example:

div {
    padding-top: 60px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-left: 70px;
}

Output-

Frequently Asked Questions

What is the use of negative margin in CSS?

Negative margins are used to reduce the space between the elements. It can also be used to overlap contents.
How can you set the values of all the four margins in one property?

Margin property is a shorthand property for the individual margin properties: top, bottom, left and right. So, it is used to set all four margins in one declaration.
What is the margin in CSS style?

The margin property defines the space around an HTML element.

Key Takeaways

In this article, we learnt different ways to specify CSS spacing like HTML spacing, margin, their properties and examples. We also learnt ways to achieve CSS text spacing.

If you want to master front-end development, check out the 10 Best HTML & CSS books for developers in 2021.

To learn more about CSS fundamentals, check out Introduction to CSS, CSS Selectors, CSS Box Model, CSS Colors and CSS Margins.

Also, read CSS Interview Questions which contains the most important conceptual questions asked in interviews for front-end roles.

Planning to ace the interviews of reputed product-based companies like Amazon, Google, Microsoft, and more? Attempt our Online Mock Test Series on CodeStudio now!

CSS Spacing

Introduction

HTML spacing

Margin

Negative margin

Margin collapse

Preventing margin collapse

CSS Text Spacing

Text Indentation

Letter Spacing

Word Spacing

White Space

Line Height

CSS Padding

Frequently Asked Questions

Key Takeaways

Interested in Coding Ninjas Flagship Courses?