For sometime now Ive been making my elements actual size subtracted by a certain percentage to compensate for the resizing triggered by padding and add a border that is the same color as the element to emulate a margin. This is really an ugly approach since depending on the device I might have over/under compensate the percentage but I found a css code that will make the padding grow inside the element size instead of growing its actual size. Below is the css code:

As you can see we have 3 different codes for different browser. With this when you use padding your html element will not auto re-size to accommodate the padding.