Is there any way to set horizontal margin and inherit the vertical margin? Other way than to set
margin: inherit 20px;
<div class="inner horizontal-margin-working">
Working but lame
<div class="inner horizontal-margin-notworking">
margin: inherit 50px;
No, there is no way to keep the vertical margins when using the short-hand property. That is because:
marginis given both in
.inner, the other class selector and so the one within
.innerwill get overwritten.
inherit(along with a length value) doesn't seem to be valid for the shorthand
marginproperty whereas it is valid for the longhand
margin-*properties and when
inheritalone is specified in the shorthand. Moreover,
margin: 10pxis set in the
.innerselector which is actually the same element (and not the parent), so
autois a valid value for
marginbut it does not keep the margin specified in a previous selector. It tells the UA to calculate and assign a suitable value. For your case, it may set the
10pxbut it may not also (depending on other factors).
marginproperty, the UA decides on how to interpret the given value based on the no. of values provided. If one value is provided, that gets set to all sides, 2 values means first is vertical while second is horizontal margin and so on.
So, in short, overriding the
margin-right specifically (like in
.horizontal-margin-working) is the only way you can get to keep the vertical margin.