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:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */

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.