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.
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.
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.
The margin is the shorthand property for the following individual margin properties:
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 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.
Adding negative margin to second block:
In the above code, only this block of code is changed.
Compare this output with the previous one to see the difference and understand the use of negative margin.
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:
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
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.
The letter-spacing property is used to define the space between the characters of a text.
The word spacing between the text is specified by the word-spacing property.
The white-space property is used to specify the handling of white space inside an element.
It is used to specify the space between the lines.
CSS padding property specifies the space to generate around an element.
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.
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.