When and why to use the 'auto' and 'inherit' keywords?

HTML & CSS
1

Hey guys,

I’m just wondering when the appropriate situation is to use either of these keywords?

I have a rough idea what purpose each serve, but I’m still not sure about the practical benefit they provide to a stylesheet.

Any insight is appreciated.

Thanks,

Bardi

2

That is not entirely correct (although it works as a simple rule-of-thumb).

There is no way to specify that a CSS property should have its initial value (what you referred to as the predefined value). If you omit the declaration altogether the computed value will be the initial value, unless the property is inherited. But you can’t say ‘use the initial value whatever that is’.

The way to think about the auto value is that it means that the computed value will be inferred automatically using some other properties.

For instance, if you have this rule,

#foo {
  width:40em;
  margin-right:2em;
  margin-left:auto;
}

it doesn’t mean that the left margin gets its initial value (0), but that it is computed from other values. In this case, subtracting the specified width (40em) and the right margin (2em) from the width of the containing block will yield the actual left margin.

3

Through out my expirience in Web Design,
I believe I have learned that what auto and inherit mean.

The majority of CSS elements have a predefined value already. auto means keep that predefined value.

Inherit means take the value that the element is passed by a parent element; for example, if you have the background of all div’s to be #ff0000;
but for one div named blue you want it to have a background of blue;
If you did div#blue{background:inhierit;}
then it would inherit the red colour because all divs are set to have the background of #ff0000;

i hope i helped and sorry if I confused you :slight_smile:

4

Aside from setting automatic horizontal margins to centre a block-level element, as Ryan mentioned, these values are most often used to ‘undo’ a generic rule for a specific element.

For instance, let’s say we want to use Helvetica for all H2 headings, except those in the sidebar which should have the same font as the rest of the text. Now, we could do it like this,

h2 {font-family:Helvetica,sans-serif}
#sidebar h2 {font-family:Verdana,sans-serif}

(Assuming that the main font family is Verdana.)

But that means we’ll have to remember to update in two places if we want to change the main font family. That’s why this is a better solution*,

h2 {font-family:Helvetica,sans-serif}
#sidebar h2 {font-family:inherit}

*) Except that IE7 and older don’t get it …

5

I use “auto” from time to time to set an element back to its “natural” width or height when I’ve fiddled with those for animation and the current value is for some reason not correct. I would explain further, but that falls outside the scope of this thread :slight_smile:

6

I never use either (well I use “auto” for margins tocenter elements).

The inherit keyword doesn’t work in IE6/7 except in a few values for some properties. Not feasible to do it there

The value “auto” is only really good for margin:0 auto (to center)

All in all there is little practical benefit for “inherit” and a little bit for “auto” :slight_smile:

7

Thanks Ryan. That’s somewhat re-assuring :slight_smile: