CSS Property Inheritance and HTML Elements

Question

I understand how CSS inheritance works, but I'm having trouble finding a good resource that indicates what properties the CSS spec initially applies to standard HTML elements like div, span, and ul. A div element is a block element, and a span element will be placed inline. These elements naturally have properties that cause these different behaviors, they aren't inherited. For example, if a span element and a div are two sibling elements that are direct descendants of the html element, they would still differ in behavior.

Where can I find a list of the CSS properties that each element initially has?

Answer 1

For example, you have to specify 'border-box' over 'content-box' for a div element, where is this specified? The browser default stylesheet for 'div' only has display: block;.

Properties that do not appear for a given element in a browser's default stylesheet are assumed to be what is known as their initial value for that element. This initial value is defined not by the browser, but by CSS (although of course a browser implementation can violate the spec as it so wishes).

As I mentioned in my comment, some properties, such as color, are designed to be inherited by default, while others, such as display and box-sizing, are not inherited by default because inheritance simply doesn't make sense for those properties.

You can find both the initial value and the inheritance information for a given property in either the propdef in the respective W3C CSS specification, or, if you prefer a more author-friendly reference, in one of many third-party resources such as MDN or WebPlatform.org.

For example, the initial value of box-sizing is content-box, and it is not inherited by default. This property is defined in the CSS User Interface module. This is why you need to explicitly declare box-sizing: border-box if you want to use that value.