inheritance - Why can't CSS padding be partially inherited using shorthand? -
from time time when browsing through stylesheets, have seen rules such following:
padding: 10px inherit;
i didn't know if valid css made 3 jsfiddles. 3 fiddles have <p>
child of <div>
parent (and tested in chrome 59.0). in first jsfiddle, child inherits parent padding (a single inherit
keyword) , inspection of elements show both <p>
, <div>
have 10px padding in both x- , y-directions:
div {padding: 10px 10px} p {padding: inherit}
in second jsfiddle, child <p>
has both x , y padding explicitly inherited (1 actual <length>
, 1 inherit
keyword):
div {padding: 10px 10px} p {padding: 10px inherit}
inspection of <p>
shows css has broken (i.e., no padding inherited);
in third jsfiddle (for completeness), child <p>
has both x , y padding explicitly inherited, in case there 2 separate inherit
keywords:
div {padding: 10px 10px} p {padding: inherit inherit}
and css breaks <p>
(i.e., no padding inherited)
i assuming means child elements cannot "partially" inherit parent property values using shorthand. is correct, , if so, why can not partially inherited? (i.e., w3c docs mention somewhere?).
update - if split padding property explicitly (don't use shorthand), can inherit (see jsfiddle)
considering have seen case #2 (second fiddle) in several stylesheets, looks other developers think partial inheritance valid.
the spec presesnts 3 options property unset
,all
, inherit
https://www.w3.org/tr/css3-cascade/#propdef-all says initial | inherit | unset
. means these values in literal sense. because wouldn't make sense define backround:url('url.png') inherit;
. hard coded example of how engine works internally. sort of defining partial importance padding:20px !important 10px;
. no have padding:!important 10px;
Comments
Post a Comment