>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


Check this:
http://stackoverflow.com/questions/4767010/why-does-css-padding-increase-size-of-element