min hui
0
I am confused by the margin in the console layout which stated both 48 on top and 48 at the bottom. I have used bootstrap to indicate the margin my-5 but on the console it shows 48. Could anyone explain it?
My code is as such:
<div class="header my-5 border border-2 border-danger">
<p>Hello</p>
</div>
my-5 uses 5 as spacings. The Bootsrap calculation is by default:
$spacing: font-size;
0: $spacing * 0;
1: $spacing * 0.25;
2: $spacing * 0.5;
3: $spacing * 1;
4: $spacing * 1.5;
5: $spacing * 3;
auto: auto;
With the default font-size of 16px means your my-5 class will be:
.my-5 {
margin-top: calc(16px * 3);
margin-bottom: calc(16px * 3);
}
That equals: 16px * 3 = 48px