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