Padding:initial vs. padding:0

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

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

If there’s no difference whatsoever, then why is the initial keyword added to CSS3?

As far as i know it is like this


body {
margin:0
}

Sets body margin to 0 and:


body {
margin:initial;
}

sets body margin to 8px (HTML 4)

source

Hi, Rain Lover.

The keyword initial refers to the default value of an object. If the default value for an object is zero, then there would be no value in choosing initial instead of 0 for the property value, as you mentioned. On the other hand, the default value of some objects is browser dependent and may have been changed or reset early in the stylesheet. IF, for some reason, one wanted to reinstate the default values for a list, as an example, ul {padding:initial; margin:initial} would do that… with one glaring exception… initial is not supported by any version of IE. Until it is, or until IE becomes nothing more than a memory, initial is not commonly used.

That’s not true – it’s 0px.

As far as I understand it this property has nothing to do with initial values selected via UA stylesheet but refers to the initial value as stated in the list of properties in the specs.

So saying ‘margin:initial’ will revert the value of the margin property to its initial value which is zero and not the value that you or a UA may have applied to it.

e.g. the default value of visibility is visible so using initial will reset the property to the default (not the user agent default although this may be the same at times).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/*http://www.w3.org/TR/CSS21/propidx.html*/
div {visibility:hidden}
div {visibility:initial}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>

Thanks for the answer!

Very true!

What I still don’t understand is why this keyword is added to CSS3 while it seems to do nothing useful and different. In fact, IMO padding:0; is easier/faster to read and understand what’s going on the stylesheet.

Thanks for the clarification!

I think the point is that you don’t need to know what the ‘initial value’ is but that you can revert to it. To say padding:0 assumes that you want padding of zero but padding:initial would mean you want the initial default - which just happens to be zero. For other properties the initial value may not be zero.

I have a hard time finding a use-case for it though as you mention unless its something that can be used to reset 'all’ properties in a section.