Adding "Formal Definition" heading above cssinfo

[butterydev]

This PR adds a "Formal Definition" heading above cssinfo in the margin web/css doc.

I noticed this heading on other property docs and it appeared to be missing here.

Let me know if this is buttery or not.

Love MDN!!! Thanks!!!

Checklist — To help your pull request get merged faster, please do the following:

1. • Provide a summary of your changes — say what problem you are fixing, what files are changed, and what you've done. This doesn't need to be hugely detailed, as we can see exact changes in the "Files changed" tab.
2. • Provide a link to the issue(s) you are fixing, if appropriate, in the form "Fixes url-of-issue". GitHub will render this in the form "Fixes fix: fixable flaws in Glossary A-D entries #1234", with the issue number linked to the issue. Doing this allows us to figure out what issues you are fixing, as well as helping to automate things (for example the issue will be closed once the PR that fixed it has been merged).
3. • Review the results of the automated checking we run on every PR and fix any problems reported (see the list of checks near the bottom of the PR page). If you need help, please ask in a comment!
4. • Link to any other resources that you think might be useful in reviewing your PR.

[wbamberg]

I think ideally CSS properties should have a top-level heading structure like:

H2 - Constituent properties (if a shorthand)
H2 - Syntax
H2 - Description (optional)
H2 - Formal definition (contains {{cssinfo}})
H2 - Formal syntax (contains {{csssyntax}})
H2 - Examples
H2 - Specifications
H2 - Browser compatibility
H2 - See also

See https://developer.mozilla.org/en-US/docs/Web/CSS/border-color or https://developer.mozilla.org/en-US/docs/Web/CSS/flex#description for an example shorthand property, and https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip for an example not-shorthand property.

So to be really buttery, this should:

• add an H2#Constituent properties, before the H2#Syntax. This should list the properties for which margin is a shorthand. This can use the same wording as in, say, https://developer.mozilla.org/en-US/docs/Web/CSS/border-color#constituent_properties, and means we no longer need the second sentence "It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.".

• rename H2#Notes to Description, and move it to after H2#Syntax

• add H2#Formal definition, after the new H2#Description, and put the {{cssinfo}} call after it.

• move the existing H3#Formal syntax to be an H2 and to follow after the H2#Formal definition. Put the {{csssyntax}} call after it.

Does that make sense?

[butterydev]

@wbamberg totally makes sense!!! thank you so much!!! ill get those updates!!!

thanks again!!!

[rachelandrew]

@butterydev were you going to come back to this?

[sideshowbarker]

@butterydev Per #3363 (comment) this PR seems to be waiting on further changes from you.

I've applied the requested changes myself

[wbamberg]

I wanted to close this, so pushed some changes along the lines suggested in #3363 (review) .

[github-actions]

Preview URLs

• https://pr3363.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/margin

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Web/CSS/margin
Title: margin
on GitHub

No new external URLs

[rachelandrew]

lgtm :)