You are currently viewing CSS Margin Collapse With These Simple Tips
  • Post category:CSS

CSS Margin Collapse With These Simple Tips

CSS Margin and Margin Collapse

  • Introduction
  • What is margin
  • What is margin collapse
  • How does margin collapse work
  • Conclusion

Introduction

  Hello guys, welcome to CSS margin collapse, In this article I would like to discuss about CSS properties with respect to margin area. Before we proceed and understand various CSS margin properties first of all.

What is margin

  The CSS margin property is used to specify the amount of area to be cleared around an HTML element. Margin area is the area around an HTML element. CSS margin properties is used to clear a area or space around an HTML element. Value to the margin is going to be space separated list of values. We can give a One value, space separated two value, space separated three value and space separated four value. Let’s see some example:

Single value

margin : 10px;

  We are giving only one value this value is going to be dedicated to margin top, left, right and bottom all four sides. So, margin-top is going to be set 10px, margin-bottom to be set 10px, margin-left to be set 10px an margin-right is going to be set 10px.

Two value

margin : 10px 15px;

  In this method, the first value is dedicated to margin-top and margin-bottom, hence margin-top is set 10px margin-bottom is going to be set 10px. The second value is dedicated to margin-left and margin-right, hence margin-left is set 15px margin-right is going to be set 15px.

Three value

margin : 10px 15px 20px;

  In this method, the first value is dedicated to margin-top, second value is dedicated to margin-right and margin-left and third value is dedicated to margin-bottom. Hence margin-top is set to 10px, margin-right and margin-left is going to be set 15px and margin-bottom is going to be set 20px.

READ ALSO  Easy Way to Create 2 Equal Columns in CSS Grid Layout

Four value

margin : 10px 15px 20px 25px;

  In this method ,the first value is dedicated to margin-top, the second value is dedicated to margin-right, the third value is dedicated to margin-bottom and fourth value is dedicated to margin-left. Hence margin-top is set to be 10px, margin-right is set to be 15px, margin-bottom is set to be 20px and margin-left is set to be 25px.

Example of margin property

  I would like to set up default dot HTML in the notepad. I written title is set to CSS margin. In the notepad body section I am going to create a two div with in I put some content. File save and you can see button has displayed. And I am going to identify that uniquely. I say ID=”div1″ in first div and ID=”div2″ in second div section. Then I create <style> tag, type is equal to text or CSS and closing style tag. I will write style for ID of div1 and apply background-color : cyan.

  Similarly I copy this code paste to div2 and I change background-color : magenta. You can see that first and second div has a different background color. One for the important thing you need to observe is, there is no margin around any of the tips actually.

<html>
<head>
<title> CSS Margin</title>
<style>
body{
font-size: 20px;
text-align: center;
}
#div1{
background-color: cyan;
margin: 10px ;
}
#div2{
background-color: magenta;
margin: 10px ;
}
</style>
</head>
<body>
<div id="div1">This is Division one</div>
<div id="div2">This is Division Two</div>
</body>
</html>

What is margin collapse

  It is the behavior of CSS margin collapse with the vertical margins. Margin-to and margin-bottom of two block little elements are combined to 1, so what does it mean basically what is a block level elements. A block level element always starts up on a new line and takes up the full width available for example h1-h6, div, paragraph all these elements. These margin between these two elements sometimes when we assign margins it doesn’t work the same the way that we want it to work. So let’s see in details why does it work.

READ ALSO  A Great Example to Understand CSS Keyframe Animation

How does margin collapse work

.first-block{
background-color: red;
margin-bottom: 25px;
}
.second-block{
background-color: blue;
margin-top: 50px;
margin-bottom: -25px;
}
.third-block{
background-color: green;
margin-top: 50px;
}
Example : 1

  I have created for div’s and I have assigned margin-bottom and margin-top to each of these Div’s. I have three block for div’s and the class name is first-block, second-block and third-block. First we’ll check to first and second block. We have margin bottom of 25px for first block and margin top of 50px for second block. If we assign this margin what will be the margin of these elements the total vertical margin. I guess 75px, using that a margin-bottom of first of all and margin-top of second block will be added.

  So the result final the result not will be 75px but I will tell one thing this will not work like this. The margin between these elements will be 50px. So what does actually happen the reason behind this is bigger margin equals to total vertical margin. This means that the total vertical margin of these two element there and then the end between these two elements will be the bigger margin. Bigger margin in our deep elements, for example the first-block margin bottom is 25px and second-block margin top is 50px. So which one is bigger, I am very pretty sure that you guessed it’s 50px. That’s why the total vertical margin between these two element equal to 50 pixels.

Example : 2

 Let’s now come to a second block which has margin-bottom is equal to -25px which is a negative margin and third-block margin-top is 50px. So what do you expect here, I said before bigger margin equals total vertical margin. Probably you’re saying shouting out there that is bigger margin is 50px. The margin in between these three elements will be 50px but the real margin between the two elements will be 20px. Because we add 50px and minus 25px like normal basic maths will be plus 25px. The negative margin is does not become 50px but it will reduce 25px because 25px of second-block is negative. So this is how it works.

READ ALSO  How to Disable Text Selection in CSS | Explained
Example : 3

  Last example is css margin collapse between parent and first last child. In web MDN documents says that margin-top of the block from margin-top of his first child margin-bottom of the block from the margin-bottom of his last child the margins collapse and end up outside the parent. I already have three DIVs and name of its classes is first-block, second-block and third-block. In first blog I have a parent and each one is child element. In style.css I have parent element the margin-top of 25px and for child element.

  Now the margin shows as 25px the margin of parent elements not here child element. If we check the child element which is H1 the margin is 50px but it not coming out of the parent element. It’s inside the div because we have assigned border-top to it. Border-top is eliminated the CSS margin collapse.

Conclusion

  CSS margin collapse is very useful too because you can come up with the questions where does your margin-top go. So in order to eliminate this you can use just border-top. Thank you guys for reading this article I hop you enjoyed the article .

Read More Information about HTML Class and ID : CLICK HERE

Leave a Reply