Does padding always increase size of element?

[eclipse]

So there's an XHTLM element and its "box".

Does adding, say 5em padding increase the total size of the box by 10 ems in width and height? How do you plan for this if you want a certain box size relative to the parent element, and yet want padding for the text or image inside the box?

 

[angelwatt]

You might want to show/describe a more elaborate example, because currently the description sounds like a contradiction.

 

[Melrose]

So what you mean is you want padding on a child element, eg a picture, and it cannot break out of the parent box?

If you have a parent container 500px wide, and the image is 490px wide, you technically cannot add 10px of padding (490px + 10px (L side) + 10px (R side) = 510p). As long as you make sure your measurements add up to less than the width of the parent you should be fine. Start with the children and add the measurements as you go back in it's DOM genealogy.

This means either resizing the child picture if need be or making the parent wider.

...or maybe I misunderstood your question?

 

[eclipse]

Thanks Melrose, that's exactly what I meant. I'll remember to calculate for the child to be X wide, and the parent to be X+padding. Cool.

What if I'm using relative measurements like ems? There are some websites that seem to scale up and down relatively so cleanly, images included. How do they do that with images scaling?

 

[SrWebDeveloper]

Image scaling?

The whole concept of scaling in general is for fonts and layout adjustment based on either browser window resizing or varying local screen resolutions of users. In liquid layouts, the images themselves don't scale - only the containers do (i.e. div or table cell). If the image in that container is a background image, it will repeat-x or y to fill the space. If an img tag is used, the image will not change unless percentage values for height and width but even then, some browsers do a poor job of maintaining the aspect ratio (pixelation, weird proportionality).

Images could be independently resized by the developer, sure, but to do it right involves more than height and width adjustments - actually the sites that do this properly use either javascript code or server side code (i.e. GD) and a well known formula to re-calculate the dimensions to maintain the same aspect ratio and proportionality before it is re-displayed. This isn't done in HTML.

-jim

 

[eclipse]

Yeah, it happens with the header image we smuggled into this SMF forum header that I don't quite understand.

http://lanksheardesign.com/forum/index.php

Click Command + a few times and watch this baby scale! It's an image wrapped in some code I haven't really bothered to tinker with... too worried I was going to break it. I'm amazed it worked actually because it is significantly larger than the CSS specified for the original logo, I just replaced the logo image with this larger one.

Something in the SMF CMS must have "accommodated" it, but not sure what script etc did it. I need to practice html and CSS designs, a fully CMS is a bit beyond me at this stage.

 

[angelwatt]

Click Command + a few times and watch this baby scale! It's an image wrapped in some code I haven't really bothered to tinker with... too worried I was going to break it. I'm amazed it worked actually because it is significantly larger than the CSS specified for the original logo, I just replaced the logo image with this larger one.

The img has a height of 70px set, and the tag it's in has a height of 70px set. It's not really scaling. The command+ is doing a page zoom, so everything scales regardless of the CSS.

 

[SrWebDeveloper]

Eclipse - you following with us now that a browser zoom has nothing to do with web development, it's a client side action controlled 100% by the browser. So when you said, "How do they do that with images scaling?" there is no "they", it's the browser in the example page you posted here.

However, as I noted earlier, developers CAN scale content on pages, including fonts, layout and even images. That is worth explaining in depth, now.

On such sites you might see the familiar:

A A A

And the user clicks one of them to resize the page. Or maybe it's a magnifying glass icon, text link, whatever. But clearly an element of the web page created by the developer. This is not a browser zoom, the developer is doing one or both of the following actions once the user selects that icon/link/whatever:

1) Dynamically switching style sheets or just the base font size using Javascript to affect the CSS (or in rare cases, server side font tag changes, i.e. font-size attribute - old school method)

2) Image scaling using the fomula as I explained earlier (common on galleries, E-Commerce sites selling items where consumers can zoom in on inventory items, etc.)

And that's the major difference between a browser zoom and a developer adding in zoom or resize features to their page. Hope you found this interesting and helpful.

-jim

 

[eclipse]

It's like I've got access to my own personal web-guru, my own "Yoda" of web design!