-1

I thought that setting a property such as:

padding-top: 25px;  

was equivalent as doing the following (using shorthand):

padding: 25px unset  unset  unset;

However, this does not appear to be the case since the browser gives me a different results. Why is this? Just out of curiosity, how can achieve setting padding-top: 25px using the padding shorthand (just for fun).

Thank you.

4
  • Did you check for any overrides?
    – m4n0
    Jun 13, 2018 at 20:19
  • why complicating ... unset = 0 Jun 13, 2018 at 20:22
  • 1
    If all you want to do is set padding-top, don't use a shorthand. You can't set that without affecting the others.
    – jhpratt
    Jun 13, 2018 at 20:26
  • @T555 - Why can't CSS padding be partially inherited using shorthand? - this should help in gaining an understanding of CSS inheritance.
    – thatguy
    Jun 13, 2018 at 20:41

1 Answer 1

1

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.

The Unset CSS Key Word

To get the shorthand notation for padding-top: 25px in CSS it would be:

  padding: 25px 0 0 0;

If you only wanted to set the top padding then the shorthand for

padding-top: 25px; 

would be exactly that, padding-top: 25px;

There is no partial inheritance for padding shorthand. Shorthand is kinda an all or nothing kinda thing.

5
  • Most of this answer is copied from here: developer.mozilla.org/en-US/docs/Web/CSS/unset
    – mfluehr
    Jun 13, 2018 at 20:24
  • 1
    This also isn't the shorthand for padding-top because it overwrites padding-bottom, padding-left, padding-right and places it at 0. Jun 13, 2018 at 20:25
  • @mfluehr The entire first paragraph is copied from that site. Was in the middle of adding the link.
    – thatguy
    Jun 13, 2018 at 20:26
  • @thatguy Thanks, I see you've now attributed your source.
    – mfluehr
    Jun 13, 2018 at 20:27
  • @MathiasRechtzigel that is true and also what I thought T555 was trying to accomplish. That being said, There is no partial inheritance using shorthand notation in CSS, So, if you are going to use shorthand then it's all or nothing.
    – thatguy
    Jun 13, 2018 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.