I have this code:
<style>
.Button
{
padding-top: 21px;
padding-bottom: 21px;
border-style: solid;
width: 100%;
padding-left: 0px;
padding-right: 0px;
display: table;
}
</style>
<a class="Button">Test</a>
This works ok. As you resize the browser, you will see the border of the link to adjust as well.
Try changing the padding-left to this:
padding-left: 10px;
See how this affects the right margin.
This is under IE 11. I also obtained the same behavior under Firefox.
Anyone can explain this and how to workaround this?
You can try it here:
https://jsfiddle.net/c98vuy0L