Bootstrap 4 has Spacing Utilities to adjust margins and paddings with simple CSS classes.
Theoretically, I could do something like this:
<div class="d-inline-block bg-inverse p-5 pb-0 m-5 mb-0"></div>
And this should be an element with paddings and margins on each side except at the bottom. Right?
But that isn't happening. Instead, pb-0 and mb-0 are being overwritten by p-5 and m-5, as you can see here:
example in JSFiddle.
pb-0 and mb-0 are defined after p-5 and m-5 in the original source, and all of the attributes used in these classes have !important. So pb-0 should overwrite the padding-bottom defined by p-5 and mb-0 should overwrite the margin-bottom defined by m-5.
I created another example where I defined these classes in the same way, but in this case, they are working as expected: comparison example in JSFiddle.
