PDA

View Full Version : div padding


dzwestwindsor
05-13-2010, 10:52 PM
Hey guys

I am ashamed of asking this question :( but I wanna make sure that I'm not doing anything I shuoldn't be doing-

so if i apply padding to a CSS div, the div takes that padding, and "pushes outward"

meaning that if my div was 100 px wide, then after i apply a 10px padding, it would be 110 px wide.

I find that a pain alot, because i have to go back and change my 100px wide div to 90, in order to make room for the padding.

Is that the only way to do this? I remember in the ancient days when we all used tables, the padding was on the inside of the table, not pushing out.


Am i missing someothing? LOL sorry for this silly question, been doing it this way for a long time, but i'm looking for a shortcut

Thanks!

DWcourse
05-14-2010, 03:39 AM
Padding adds to the width of the object it's applied to.

To simplify things, I try to apply padding to objects without a specified width. so if I have a div width: 100px I'd apply the padding to its contents.

Corrosive
05-14-2010, 06:24 AM
Is it THAT hard to remember?? The Box Model is a fundamental of CSS and should be one of the very first CSS things you learn and understand ;)

DWcourse
05-14-2010, 01:00 PM
Is it THAT hard to remember?? The Box Model is a fundamental of CSS and should be one of the very first CSS things you learn and understand ;)

I agree but it is annoying to have to refigure everything if you decided you really want 10px of padding instead of 9.

Corrosive
05-14-2010, 01:07 PM
I find it more annoying to try and remember to add 10px (or 9) to every element I might find inside a structural div to be honest. It is also using extra code where it isn't required. If I add padding to one div then that is one style that will apply to all the div content. If I add it to paras, heads, tables etc. then that is more code. Only bytes I know but still...

Hey, each to their own though.

DWcourse
05-14-2010, 01:30 PM
Corrosive is right. I was mainly referring to the main content areas in my layouts. As I generally set it up the #container div sets the overall width and the #header, #content and #footer divs don't have a specified width so I can use padding (and margins and borders) freely for them without worrying about it.

Of course in my sidebars I have to take padding into account.

domedia
05-14-2010, 01:48 PM
I don't use padding for any of the main layout boxes (#header, #main, #content, #footer, etc).
If you use it on elements with variable width, there's no thinking involved ;)