padding：initial与padding：0

Question

Does padding:initial have any advantage over padding:0 ? Example:

<style>
  textarea {
    padding: 0;
  }
</style>
<textarea>Hello, world!</textarea>

Answer 1

They mean the same thing, as the initial value of padding is, in fact, zero on all sides. You can find this in the propdefs for padding and its longhands in this section of the spec.

In this case, given the nature of the padding property, and the fact that its initial value is basically common knowledge at this point, there isn't much of an advantage of setting padding: initial over padding: 0 .

In fact, there's one disadvantage , and that is its as yet incomplete browser support owing to the fact that it's a relatively new keyword. Namely, if padding wasn't already zero on this element, browsers that don't support the keyword would ignore the declaration entirely, resulting in the property not being reset to zero.

---

The initial keyword is most useful when used with the new properties defined in the CSS3 Cascading module (none of which are implemented yet AFAIK, and where the keyword itself is defined). It can also be used when you simply want to reset a property to its initial value without caring what that value actually is, which is particularly useful for properties that are either inherited by default, such as color (although the initial value in that case would be currentColor ), or in cases where the "initial" value can otherwise vary depending on the layout and thus cannot be determined as a fixed value. Such cases, however, are admittedly quite rare.

Lastly, note that "initial value" and "browser default value" are not the same; the initial value is defined by spec, which is separate from what value the browser assigns to certain properties on certain elements as part of its default stylesheet. There is no reliable way to reset a property to its browser default for the given element without using prior knowledge or even JavaScript to determine this default value. See this answer for an illustration.

Answer 2

Actualy both are same,But Initial gives the developer more freedom.(@simon's comment)It cannot be always zero,it can be any initial value.

So there isn't much advantage of using padding: initial over padding: 0

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

Another Example

<p style="color:red"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p> 

read through https://developer.mozilla.org/en-US/docs/Web/CSS/initial