> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/cascade/inheritance.md).

# Inheritance

{% tabs %}
{% tab title="📗 參考" %}

* 🗣 [Which CSS properties are inherited?](https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited)
* 📗 SitePoint ⟩ [CSS Inheritance: An Introduction](https://www.sitepoint.com/css-inheritance-introduction/)
  {% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

## inherit

* **inheritance** flows down the **DOM** tree.
* use `inherit` to make **inheritance** take precedence over the **cascaded value**.
* use `inherit` to **force inheritance** of a property **not normally inherited**, such as **border** or **padding**. :point\_right:See: [border-box fix](/web/css/box-model/border-box-fix.md)

## intial

* Every CSS **property** has an **initial** (default) value. If you assign `initial` to that property, then it resets to its **default value**.
* remove a border: `border: initial` 
* restore default width: `width: initial` 

| property | default value | note |
| -------- | ------------- | ---- |
| width    | auto          |      |
| display  | inline        |      |

## examples

{% tabs %}
{% tab title="inherit" %}

```css
/* global link color */
a:link { color: blue; }

/* parent */
.footer { 
    color: #666; 
    background-color: #ccc; 
    padding: 15px 0; 
    text-align: center; 
    font-size: 14px; 
}

/* child */
.footer a { 
    color: inherit;             /* inherit from parent: #666 */
    text-decoration: underline; 
}
```

{% endtab %}

{% tab title="initial" %}

```css
.footer a { 
    color: initial;             /* = `color: black` */
    text-decoration: underline; 
}
```

{% endtab %}
{% endtabs %}

## inherited properties

{% tabs %}
{% tab title="參考" %}

* [Which CSS properties are inherited?](https://stackoverflow.com/a/5612360/5409815)
  {% endtab %}

{% tab title="text" %}

```
font-family
font-size
font-style
font-variant
font-weight
font

letter-spacing
line-height

text-align
text-indent
text-transform

white-space
word-spacing
```

{% endtab %}

{% tab title="list" %}

```css
list-style-image
list-style-position
list-style-type
list-style
```

{% endtab %}

{% tab title="table" %}

```css
/* control border behavior of tables */
border-collapse
border-spacing
```

{% endtab %}

{% tab title="others" %}

```
azimuth

caption-side
color
cursor
direction
elevation
empty-cells
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
visibility
voice-family
volume
widows
```

{% endtab %}
{% endtabs %}

## references

{% tabs %}
{% tab title="📘 官方" %}

* [Inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance)
  {% endtab %}

{% tab title="🗣 討論" %}

* [Which CSS properties are inherited?](https://stackoverflow.com/a/5612360/5409815)
  {% endtab %}
  {% endtabs %}