doc: fix minor style issue in code examples

[danbev]

Checklist

• make -j8 test (UNIX), or vcbuild test nosign (Windows) passes
• documentation is changed or added
• commit message follows commit guidelines

Affected core subsystem(s)

doc

Description of change

I've noticed that a few of the code examples have an minor indentation
issue with the first line, for example:
https://nodejs.org/api/child_process.html#child_process_child_process

This commit attempt to fix this issue by using the suggestion provided
by Brain White which is to add a separate style for code with a
padding-right and padding-left of .0em.

Fixes: #9381

[mscdex]

The commit message should include: Fixes: https://github.com/nodejs/node/issues/9381

[mscdex]

Also, I think it might be more involved than just changing the one padding value. Changing the value also affects the tt tag formatting and IMHO those tags look better with the current padding.

Perhaps we could just keep the existing tt, code block the same, but add a block afterwards like:

code {
  padding: .1em .0em !important;
}

or strip the padding from the tt, code block and just add a new, separate block for each tag, with the correct padding in each.

[danbev]

The commit message should include: Fixes: #9381

I'll make sure I take a look at any existing issue next time. I'll add this. Thanks

[danbev]

Perhaps we could just keep the existing tt, code block the same, but add a block afterwards like

Thanks, I've updated the PR with your solution. Let me know if there is anything I've missed.

[Fishrock123]

Erm, is there no way to do this without !important? That smells of other structure problems in the CSS file.

[danbev]

Erm, is there no way to do this without !important? That smells of other structure problems in the CSS file.

My CSS skills are definitely questionable so please let me know if you have something different in mind. I've updated the PR with the other suggestion provided by @mscdex. Having a separate tt and code selector with the padding for each and no !important.

[silverwind]

I think the preferable solution would be to eliminate the code nested in pre completely, but I'd accept something like this (with the comment) as a temporary solution:

/* TODO: eliminate the `pre > code` nesting in favor of `pre` */
pre > code {
  padding: 0;
}

But please make sure it doesn't affect anything else first :)

[danbev]

@silverwind Thanks for your guidance. I've updated the PR and please let me know what you think.

[silverwind]

Please don't remove this line, pre > code wins over it in terms of rule specificity and this rule still necessary to add padding to inline <code> blocks.

[silverwind]

You can also drop the comment. See #9535 (comment) for my reasoning.

[silverwind]

Thanks! Landed in bd83422.