ansaurus

Question

What does the inherit keyword in CSS do?

Answer 1

+3 A:

I'm not going to plagiarize the fine explanation on sitepoint.com so I'll just give the url here:

http://reference.sitepoint.com/css/inheritvalue#

Hannson 2010-01-04 21:56:53

The SitePoint article is super clear with great explanation! Great link!

Doug Neiner 2010-01-04 22:02:02

Answer 2

+13 A:

It will use the same same value as the same property his parent has.

<body>
<h1></h1>
</body>

css:

body{
 margin: 234px;
}
h1{
 margin: inherit; #=234px
}

Note to this if there are multiple instances of <h1> in the file, it will take the margin of it's parent. So 234px is not always the value it will have. For example

<body>
  <h2></h2>
  <div>
    <h2></h2>
  </div>
</body>

css

body{
margin: 20px;
}
div{
margin: 30px;
}
h2{
margin: inherit; #20px if parent is body; 30px is parent is div
}

Timo Willemsen 2010-01-04 21:58:28

Its important to note this does not work in IE6+IE7, but great answer. +1

Doug Neiner 2010-01-04 22:00:31

Even in IE8- it works with "direction" and "visibility" properties

Sergey Ilinsky 2010-01-04 22:08:52

I think the person who asked this question did know how "inherit" works, what he [likely] wanted to know however: "What are the use cases for using CSS inherit mechanism"

Sergey Ilinsky 2010-01-04 22:10:13

@Timo, yes, it works as you have explained. Open this link in Safari or Firefox to see it working: http://jsbin.com/umopi

Doug Neiner 2010-01-04 22:10:24

@Doug Neiner, thanks removed my comment in my post.

Timo Willemsen 2010-01-04 22:11:57

ansaurus

tags:

views:

answers:

What does the inherit keyword in CSS do?

related questions