Serring Defaults To Zero Efficiently In CSS

HTML & CSS
1

Sitepoint Members,

I this an efficint way to preset these values to zero:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,li,ol,ul,table,tr,td,th,p,img {margin:0;padding:0}
What does this actually do? What is it doing that gives good cross-browser baseline?

If I understand this line
"For example, the rule body ul li a {…} specifies a redundant body selector, since all elements are descendants of the body tag. "

from this webpage

Then all I need in order to do the same thing is
html,body{margin:0;padding:0}

Is that right?

Thanks,

Chris

2

Each browser gives default margins and paddings to various elements, so the point of removing these is so that you know where you stand cross browser. Otherwise, an element might be where you want it in one browser but in a slightly different position in another, unless you have set margins and paddings explicityly on that element.

Strictly speaking, it’s more efficient to set margins and paddings on each element as you come to them.

Then all I need in order to do the same thing is
html,body{margin:0;padding:0}

No, that won’t work. That only targets the body and html elements. The ‘reset’ rule you posted above targets each element listed. The commas between each element are what make the difference.

This rule

body ul li a {...}

targets just an a element inside a li inside an ul inside body.

This

body, ul, li, a {...}

targets the body, ul, li and a elements separately.

3

Ralph,
That one question
What does this actually do?.. I pasted in their by accident.

I never realized with and without comas in CSS means 2 different things.

I’ll leave it as I have it.

Thanks,

Chris