What are Margins in CSS?

Konfinity
September 18,2020 - 10 min read
What are margins in CSS and why are they important?

CSS is a very vast topic, it covers various topics and sub themes that need to be comprehensively covered in order to make and add effective design on the websites. One such interesting and prominent feature is the margins in CSS.

Margins refer to the space that exist outside of the borders. In CSS they refer to the exact same thing. Margins are used to create spacing around the HTML elements. CSS gives you the freedom to decide how much margin you want to keep at all four sides (top, bottom, left and right) of an element.

Margins can push or pull to create space between the element and the browser window or between two elements depending on the configuration of the web page.

Web developers use a combination of padding and margin to create appropriate spacing on the website. However, margin and padding perform separate functions and we would understand the difference as we proceed further.

So next time you see a website, you know how they created space between the image and the text. Margins are very important because they make the text readable along with contributing to the aesthetic value of the website. Imagine all the text, images and everything else sticking together. You would probably close the website in less than a second. Web developers pay keen attention to the margins they set for their elements. Let's see how they do it.

Margins in CSS

I am assuming that you know what properties and value are in CSS but if you don't, there is nothing to worry about. Read this article and you'll get to a complete overview of CSS and its features.

Imagine margin as a group of properties and not just one. The set consists of margin-top, margin-right, margin-left and margin-bottom. Each of these are self-explanatory. Margin top sets the top Margin of an elements. It creates space at the top of the element. Similarly, the margin-bottom sets the margin from the bottom of the element. Margin-left and Margin-right sets the border from the left and right side of the element respectively. A proper syntax of margins and its values (in pixels) is given below.

  • p {
  • margin-top: 100px;
  • margin-bottom: 100px;
  • margin-right: 150px;
  • margin-left: 80px;
  • }

The syntax above is easy to understand. The top margin allocated set for the paragraph is 100px and the bottom margin set is also 100px. The left and the right margin set are 150px and 80px respectively.

We have seen the syntax but now let’s see an actual code where the element sets itself according to the value of margins given to it. We will write a complete CSS code to understand the property of margins and hot it is affected with accordance to the values given.

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <style>
  • div {
  • margin-top: 100px;
  • margin-bottom: 100px;
  • margin-right: 50px;
  • margin-left: 290px;
  • background-color: lightblue;
  • width: 20%;
  • }
  • </style>
  • </head>
  • <body>
  • <div>Welocme to Konfinity</div>
  • </body>
  • </html>
The output of the code above would be –
Practical implementation of margins in CSS

The box has specific margins from the top, bottom, left and the right side of the element. The element has 10px from both top and bottom and 50 and 290 px from right and left side respectively. You can play with margins and set the right one that suits the configuration of your webpage. Setting the correct margin is more a result of trial and error than precise calculation. The amount of gap to be left purely depends on what works and looks good as a part of the layout.

Shorthand for Margins in CSS

Both the code and the syntax above uses ‘px’ to specify the values of margin but in practice that’s not always the case. There are various ways using which you can express the size of the margin for your elements.

Now we are going to discuss the ways in which the values that are supplied to the property can be expressed–

  • We can set the margin property in terms of pixels, em and percentage. Most of you would be aware of pixels but for those who don’t know, pixel-size is based on the resolution of the screen. Setting up the margin using pixels gives you more control over the spacing for your elements.
  • The em is just another way of specifying the margin to get a clearer picture – 1 em is equal to
  • The good old method of percentage is well known to all of us! You can easily set the font margin percentages. It is easier to understand it like – the percentage of the entire screen you want the spacing to be.
  • Inherit is another way of specifying margins to the elements. In this method, the child component inherits its margin value with parent component.
  • Auto Margin in CSS allocates space for itself automatically. The browser selects a suitable margin for the particular element according to the configuration of the web page. Auto can be used for all four margin properties (top, right, bottom and left). The auto margin is often used to bring element at the centre.

While the proper syntax is the one you just saw but there is also a shorthand for margins in CSS. Instead of writing all the properties separately (i.e margin-top, margin-right, margin-left and margin-bottom) you can just write Margins and specify the values. The syntax for the same is –

  • p {
  • margin: 25px 50px 75px 100px;
  • }

The sequence by which the values bare assigned are - top, right, bottom and left. That means, going by the code above, the margin set for the particular element is 25px from the top, 50px from the right side and 75px and 100px from the bottom and left side respectively.

However, if fewer than four values are available than the missing values are assumed in a particular way. If only one value is mentioned then the same margin is set for all four properties of the margin. For example -

  • . box {
  • margin: 5px;
  • }

This means that all elements of the box class would have a margin of 5px from all sides that is top, bottom. Left and right.

If the values mentioned are three then the distribution is as follows- top, [left and right], bottom. For example –

  • . box {
  • margin: 0px 5px 5px;
  • }

This means that all the elements of the class ‘box’ would have top margin as 0px and left and right margins as 5px. The margin on the bottom side would be 5px.

The Box Model in CSS

Margins are essentially a part of the Box Model in CSS. For those unaware, the box model treats every HTML element like a box. The box has certain properties that defines the styling and design of the element. The box that wraps every element consist is Margin, border and padding.

Padding and margin in the CSS box model looks very similar to each other but in reality, their functionalities are totally different. In short, there are three different properties of box model in CSS. Now that there is a perspective, let's understand the distinction between padding and margin.

Padding is used to create space within an element whereas margins as we discussed is used to create space between elements. Margin refers to the gap between adjacent elements while padding refers to the space between content of the element and the element itself.

Negative Margins in CSS

Negative margins are an interesting concept in CSS. We’ve seen that positive margins push away the elements to create space. If the margin-left is 5px, then the element is pushed away from the right.

Negative values do exactly the opposite task. The element is pushed towards the required side. If the margin-right is -5px, then the element is pushed towards the right.

Positive values push the elements farther from its neighbours whereas negative values bring them closer.

Margin Collapsing in CSS.

Collapsing border is a confusing (and often frustrating) concept for most developers. Many times, CSS margins behave unexpectedly because of collapsing borders. Let’s clear the concept of margin collapsing for once and for all.

Margin collapsing occurs when the top and bottom borders are collapses into a single margin. The size of the margin is equal to the largest of both the Margins. In case both the margins are equal, then the size is equal to any one of them.

The important thing that makes this feature a little distinct is that the margins don't add up and create more space between elements rather the final margin between them is the bigger one out of both the values.

Basically, it is a concept which comes into play when two verticals (bottom and top) collapse with each other. This happens when the value of the two borders are such that the whitespace around the element overlap each other. Let us understand this by an example

  • h1 {
  • margin: 0 0 50px 0;
  • }
  • h2 {
  • margin: 20px 0 0 0;
  • }

In the above example the bottom margin of h1 is set to 50px and the above margin of h2 is set to 20px. If h1 and H2 are placed vertically then their margins are set to collapse. At first sight, this margin between h1 and H2 may be perceived as 70px (50px+20px) but that's not the case in CSS. The collective Margin between h1 and h2 would be 50 px which is the bigger of the two of them. This is the concept of Margin Collapse.

The science of collapsing Margins is a little skewed when it comes to negative Margins. In case of one positive and one negative margins, the resultant is a subtraction of negative margin from the positive one.

In the second scenario where both the Margins are negative, then the resultant margin is the bigger negative (not the bigger number). An example of both the cases of negative collapsing margin is given below.

Case 1 (when only one Margin has a negative value)

  • h1 {
  • margin: 0 0 50px 0;
  • }
  • h2 {
  • margin: -20px 0 0 0;
  • }

The resultant margin is 30px (50-20). The reason is discussed above, the negative value is subtracted from the positive value of the margin.

  • h1 {
  • margin: 0 0 -50px 0;
  • }
  • h2 {
  • margin: -20px 0 0 0;
  • }

The resultant margin is -50px (50-20). As discussed, in case of two negative margins, the more negative one becomes the resultant Margin.

We have understood Margins in CSS comprehensively. However, if there are still some doubts hovering around your mind, you can always come up with question and we would be more than happy to answer them for you.

Margin is an important property in CSS because they are pivotal in the process of building a pleasing layout for a website. If you love developing web pages, then a detailed understanding of every concept is required. Margins in CSS are just one of them, there are various other details that are waiting to be explored.

In case you didn’t know, Konfinity ‘s Web Development Course is developed by experts from IIT DELHI in collaboration with tech companies like Google, Amazon and Microsoft. It is trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more.

Join the course to master the art of creating web applications by learning the latest technologies, right from basic HTML to advanced and dynamic websites, in just a span of a few months.

Konfinity is a great platform launching a lucrative tech career. We will get you started by helping you get placed in a high paying job. You know what’s amazing - no prior coding experience is required to take up our courses. Start your free trial here.

Chat with us on WhatsApp