PDA

View Full Version : CSS Best Practice


Ricky55
03-19-2009, 11:05 AM
This is quite a fundamental question, whats the best way or the proper way of doing this:

If I have a Div that contains one paragraph and one heading, and I need 30px of left padding should the padding be added to the paragraph and h1 or to the div?

So if my Div was 300px wide and I added 30px of left padding I would set the width of the Div to 270px to take this into account? or should I just add the padding to the paragraph and h1 and leave the width of the div?

I know this is a basic box model question and in the past I have always added the padding to the inner element for ease but is this the best way of working?

What does the W3C recommend?

Corrosive
03-19-2009, 01:19 PM
This is quite a fundamental question, whats the best way or the proper way of doing this:

If I have a Div that contains one paragraph and one heading, and I need 30px of left padding should the padding be added to the paragraph and h1 or to the div?

So if my Div was 300px wide and I added 30px of left padding I would set the width of the Div to 270px to take this into account? or should I just add the padding to the paragraph and h1 and leave the width of the div?

I know this is a basic box model question and in the past I have always added the padding to the inner element for ease but is this the best way of working?

What does the W3C recommend?

I have no idea what the best practice is mate but I'd add the padding to the div rather than the p or h1 tags.

Ricky55
03-19-2009, 02:15 PM
I've actually asked on another forum I use that's dedicated to CSS and they are saying there's no real best practice as such, the best practise is to keep the CSS to a minimum.

In my mind it makes more sense in this case to add the padding to the p and h1, so I can then keep the Div at its original width.

I think if I had a few paragraphs inside the div then I would add the padding to the div.

Any one else got any thoughts on this.?

I think its hard to learn best practise with CSS, especially when you are working on your own.

Hunter86
03-19-2009, 03:00 PM
Hello, i am very new in the webdesign world but i thought i would give my thoughts as i work on my own and its nice to hear from other people sometimes !
i normaly add the padding to the inner element when it comes to paragraphs and h tags.
I read this practise in the sitepoint book by Tommy Olsson & Paul O B r i e n The Ultimate css refernce on page 212 box properties.
as i said im very new so i dunno whether this is best practise or not.
dan

d a v e
03-19-2009, 03:43 PM
in eric meyer's book (damn what's it called, anyway the one from a couple of years ago or more) he advocated adding it to the contents, rather than the container, to avoid any box model trouble... not sure whether that still applies.

Ricky55
03-19-2009, 03:53 PM
Very interesting, I thought you were going to say he advocated adding it to the Div.

Well if its good enough for Eric Meyer then its good enough for me.

Thanks.

d a v e
03-19-2009, 05:03 PM
i'll try and dig out what he's says more precisely just to make sure i've got it right ;) i must admit i usually just add it to the container itself and check it IE6 etc...

Ricky55
03-19-2009, 10:04 PM
Thanks Dave

d a v e
03-20-2009, 05:59 PM
reading it again it seems to be because of the box model flaws/interpretations between different browsers BUT this is "IE4+/win IE 5+ [!], netscape 6 and opera [unspecified version] so i'm not so sure it applies so much any more ;)
could be a good alternative to set padding (and borders!) on a div's contents rather than on the div itself.
(the book is 'Eric meyer on css' from 2002/2003 )

Ricky55
03-20-2009, 06:48 PM
thanks man