In the following example, there are 4 responsive images set up 4 in a row with 1% margins and 1% padding, which all works and scales just fine, but when I add a 1px border to the images, it breaks. How do you adjust the %’s to account for the space a 1px border takes up? I commented out the border for now, but was wondering if there is a formula for this, or a different way that it should be marked up (like in a container or something)? Thanks!
@joshuanhibbert, box-sizing worked perfectly and seems to have pretty good browser support as long as you add the appropriate -prefixes- where necessary. I tried what @wolfcry911 suggested too, but when I add padding to the img tag, it makes the right margin vanish. I tried the padding on the anchor, but it didn’t pad the image inside the border, which is what I was looking for. Anyway, take a look if you want and you’ll see what I mean if you uncomment the padding.