How a 1px border affects percentage widths

[Anonymous]

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!

http://codepen.io/msguerra74/pen/GEvlu

[joshuanhibbert]

The solution is to use box-sizing: border-box; but this will also alter the behavior of the padding, so you will have to adjust the width to account for that. Also, you are using JavaScript comments in CSS?

[joshuanhibbert]

See here for more info: https://css-tricks.com/box-sizing/

[Anonymous]

Haha, oops, I was messing with js earlier and commented the CSS wrong! Funny that it worked though. Anyway, I’ll take a look at the link you posted. Thanks for your feedback!

[sachinn]

Hi Msguerra,

Add this css in img class.
It will work.

box-shadow:0 0 1px 0 #000;

[joshuanhibbert]

@sachinn That is another option, although you probably want to use the spread value rather than the blur (e.g. box-shadow: 0 0 0 1px #000;).

The reason I suggested using box-sizing instead of box-shadow is that it has slightly better browser support (IE8 for instance).

[wolfcry911]

you could also just apply the float, padding, and margin to the anchors and the borders to the images

[joshuanhibbert]

Haha, yeah, do what @wolfcry911 suggested. Man, I way over-thought that!

[Kitty Giraudel]

You could also use calc().

[Anonymous]

@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.

This is adding the properties to the a and img elements:
http://codepen.io/msguerra74/pen/Hzdpw

This is using box-sizing:
http://codepen.io/msguerra74/pen/GEvlu

Thanks again for the suggestions!

[Author]

Posts