firefox button remove padding in firefox 77 - css

Question

I tried using the solutions found on stackoverflow to do this but it does not seem to work in newer versions of firefox. I want the red background to take up the entire button but this only works in the chrome, not firefox. I added the button::-moz-focus-inner css rules that should resolve this. Does anyone know how to do this in newer versions of firefox?
<style>
button {
padding: 0px;
}
label {
display: block;
padding: 1px 6px;
background-color: red;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
</style>
<button>
<label for="myId">My Button</label>
</button>
<br />
<button>My Button</button>
<input id="myId" type="checkbox" />

Answer 1

You've put a label into a button, and are applying the red background to the label, not the button. You'd be better off not using a label tag, but if you need to, put the button in the label tag.
<style>
button {
/* Padding is pretty important for buttons */
padding: 3px 5px;
border: 0;
background-color: red;
cursor: pointer;
margin: 0px;
}
</style>
<button>My Button</button>
<!-- It is good practice to put labels right before what they are labeling -->
<label for="myId"><button>My Button</button></label>
<input id="myId" type="checkbox" />
I may be wrong, and by all means im not trying to be rude. But it looks like you're pretty new to web dev. Look up any css property or tag you're having trouble with on W3Schools. It's a great website.
Cheers, Isaac.