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><br /></code> element.</p>
<hr />
<p>You can also use a <code><hr /></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 marginis 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.
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.
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.
133+ registered 
