Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Alex Hird
Alex Hird
2,767 Points

Padding with images

Hello,

Is there a difference with adding padding to images and other elements, such as anchor. For instance, when I add padding to the .main-nav a elements, it expands the content area. But when I add padding to the image, it shrinks the image and keeps the area the same size?

Thanks,

2 Answers

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Alex

Sounds like your images has "box-sizing: border-box", this will include the padding as part of the img width. Where as "border-box: content-box" will add the padding outside of the img width.

Hope this helps

Wolfgang Warneke
Wolfgang Warneke
10,845 Points
Wolfgang Warneke
Wolfgang Warneke
10,845 Points

I suspect that this is happening because the image has box-sizing: border-box applied to it.

Hopefully someone will have more detailed knowledge about this, but tinkering with images in the browser, it seems that adding padding shrinks the images when the CSS box-sizing is set to border-box, fixing the width and forcing the image smaller to compensate. If box-sizing is set to content-box this the padding does not force the image smaller. The image shrinkage doesn't seem to occur with a specified width and height for the image... One notable difference between an image tag and an anchor tag, is while anchor tags are inline by default, images are inline-block by default. It seems that this padding behavior is somehow a byproduct of the scaling nature of images in the browser. Setting an anchor element with display: inline-block doesn't give the same result. Text doesn't really seem to scale the same way that images do. Text in general won't scale with it's container unless it's with viewport-percentage lengths.

Sorry if that's a bit rambly/convoluted. If anyone has some more clarity to offer about this, that would be good