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?

You seem to be asking two different but linked questions here: 1) how inheritance works for properties where inheritance doesn't make sense, and 2) what default styles are applied to various elements. The answer to #1 is that CSS defines which properties are inherited by default and which are not - display is one of those properties that are not inherited by default because, as you've correctly pointed out, it doesn't make sense for that property to be inherited. — BoltClock, CommentedApr 17, 2015 at 17:46
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;. — Himmel, CommentedApr 17, 2015 at 17:49
There is this W3C page which lists "Typical default display properties" for each of the elements. Does that help? — Mr Lister, CommentedApr 17, 2015 at 17:49
If you want the default stylesheet values for the browsers, this question is a duplicate of stackoverflow.com/questions/32875/… (which does have some links you might be interested in). — Mr Lister, CommentedApr 17, 2015 at 17:53

BoltClock · Accepted Answer · 2015-04-17 18:05:03Z

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.

That last link you posted is helpful. It is evident that div has an initial value of content-box because the document specified "Applies to: all elements that accept width or height", but it would be nice to be able to search for an element, like a div or a span and determine which properties are applied to it. I guess this functionality isn't available? — Himmel, CommentedApr 17, 2015 at 18:05
@Himmel: The thing about CSS is that, with a few exceptions, virtually any CSS property can be applied to any HTML element regardless of browser defaults. So when it says "Applies to: all elements that accept width or height", it really means all elements that are not display: none/inline/table-row/table-row-group. As such I don't think there are tools available to determine this sort of information - all I have at my disposal is my knowledge of the internal workings of CSS. — BoltClock, CommentedApr 17, 2015 at 18:08
It just seems strange that you have to take a deductive approach to determine these initial property values (height/width -> div) rather than there being a source that allows you to see ALL of the properties and initial values that an HTML element contains. — Himmel, CommentedApr 17, 2015 at 18:13
@Himmel: I agree. You could create a dummy element in a blank page and inspect its styles, but browsers tend to list used values rather than computed values, although they do try to point out if a certain property was taken from the default stylesheet. — BoltClock, CommentedApr 17, 2015 at 18:15

Collectives™ on Stack Overflow

CSS Property Inheritance and HTML Elements

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related