Why GitHub use both of padding and margin? - html

Question

GitHub use margin:40px and padding:24px. To use only margin or padding is not good? ex. margin:64px or padding:64px. I want to know the reason why GitHub use both of them.
<style text="css">
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
</style>
<p class="alt-lead text-center text-gray mb-6 pb-4 col-md-10 mx-auto">
Open source software is free for you to use and explore. Get involved to perfect your craft and be part of something big.
</p>
<div class="clearfix gut-lg">
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-future.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Shape the future of software</h3>
<p class="alt-text-small text-gray">Your contributions help make technology better for everyone, developers and non-develo alike.</p>
</div>
</div>
</div>
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-best.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Work with the best in the field</h3>
<p class="alt-text-small text-gray">Amazing developers use GitHub. Contribute code to projects that change how software&nbs built.</p>
</div>
</div>
</div>
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-grow.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Grow your skills and help others</h3>
<p class="alt-text-small text-gray">Whatever your skill level, working on open source software is a great way to learn newp;things.</p>
</div>
</div>
</div>
</div>

Answer 1

I guess you already know different between margin and padding. but wondering why they using both combined instead of one thing.
If you check their code. you will see they come from different class.
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
and If you dig a bit deeper you will see they have these classes in their framework.
.mb-1{ margin-bottom: 4px }
.mb-2{ margin-bottom: 8px }
.mb-3{ margin-bottom: 16px }
.mb-4{ margin-bottom: 24px }
.mb-5{ margin-bottom: 32px }
.mb-6{ margin-bottom: 40px }
and same things for padding pb-1 to pb-6
Now, If they want 64px space they have options to define a new class or re-use those class.
And they choose to reuse .pb-4 + .mb-6 to get 64px instead of define a new class just for one time using and without messing around with their framwork.

Answer 2

The reason why people would use margin and padding together would usually be due to the use of a background color, or background image.
If the background is left blank/transparent, it does not matter if you use a padding or a margin. However once you set the background color, the padding will increase the size of the element which includes the background color, while the margin will separate it from other elements creating white space in between.
Hope this helps you understand!

Answer 3

What I am understanding is that you went through GitHub's styles and noticed that they used both margin and padding in their CSS. Your question appears to be "Is using one/both preferred or does one method have an advantage?"
The answer to which is no, there isn't an advantage to using either, but you need to understand what margin and padding are
Margin
Margin is space between that element and elements around it. so saying margin:5px on something will put a five pixel wide margin around the entirety of the element, ensuring other elements do not "touch" it.
Example:
Notice that there is a very visible gab between the first element and the second element. And there is even a gap between the left side of the container and the first element.
.row > * {
float: left;
min-width: 25%;
max-width: 30%;
margin: 5px;
background-color: blue;
color: white;
}
<div class="row">
<div>Hi</div>
<div>Hello</div>
</div>
Padding
Padding, on the other hand, is how much space there should be between the edges of an element and the element's own contents. padding:5px says that there is a a sort of boundary inside the element five pixels wide on each side. To extend our first example:
Notice that there is a very small gap between the contents of each element's wall (where the background begins or ends) and the text content.
.row > * {
float: left;
min-width: 25%;
max-width: 30%;
margin: 5px;
padding: 5px;
/*Try removing/changing this value to see what effect it has.*/
background-color: blue;
color: white;
}
<div class="row">
<div>Hi, this text is longer so that we can see the border around the element and how much space there is between the walls of the element and the text.</div>
<div>Hello</div>
</div>
Tl;Dr
Margin is used to create a gap or some space between elements. Padding is used to create space between an elements contents and it's "walls."

Answer 4

So you seem to know
Padding is space inside the border, whereas Margin is space outside
the border.
Do you also know that that means, if you have margin set to elements following by the same elements it will just take the biggest possible value. So if margin-bottom is bigger than margin-top of the following element it will take margin-bottom.
So example gap will be margin-bottom from first element 20px.
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
margin-bottom: 20px;
}
div.two {
margin-top: 5px;
}
<div class="one"></div>
<div class="two"></div>
Kinda same example gap is again 20px but this time it is the margin top from the second element.
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
margin-bottom: 5px;
}
div.two {
margin-top: 20px;
}
<div class="one"></div>
<div class="two"></div>
And here what happens if you use padding. If you use your browser debugger you will see that now the gap should be 27px (25px from both elements padding + 2x1px border)
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
padding-bottom: 5px;
}
div.two {
padding-top: 20px;
}
<div class="one"></div>
<div class="two"></div>
So to answer the why. If you know this you can have reasons to use one over the other.