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!
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?
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!
@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.
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
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?See here for more info: http://css-tricks.com/box-sizing/
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!
Hi Msguerra,
Add this css in img class. It will work.
box-shadow:0 0 1px 0 #000;
@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-sizinginstead ofbox-shadowis that it has slightly better browser support (IE8 for instance).you could also just apply the float, padding, and margin to the anchors and the borders to the images
Haha, yeah, do what @wolfcry911 suggested. Man, I way over-thought that!
You could also use calc().
@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!