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

Popular posts from this blog

html - How to set bootstrap input responsive width? -

javascript - Highchart x and y axes data from json -

javascript - Get js console.log as python variable in QWebView pyqt -