Apply the same margin-top rule for all input elements of a form

[lcarcone]

I need to redesing a form containing several questions and for visibility concerns I'd like to use for each question a box as defined in [1].
While doing this, I noticed that some inputs had no 'margin-top' as the css rule 'form > * + *' does not apply.
I created a small page [2] reusing the sample given in [3].

The first example reuse the original test, the input elements have a 'margin-top' rule
The secong example shows the same test within an extra div element containing the class 'l-box', the input elements have no 'margin-top' rule
I found a go-round by using the class 'field-group' along with the class 'l-box' on the extra div, this class acts as the rule 'form > * + *' and gives the expected result, see third example.

It would be better if all input elements of a form had the same 'margin-top' regardless of their postion in the structure, ie even if they are not a direct child of the form element

[1] https://design-system.w3.org/layouts/box.html#default-box

[2] https://w3c.github.io/wbs-design/html/report-1.html

[3] https://design-system.w3.org/styles/forms.html#dealing-with-dates-and-times