Code appearance is wrong

[AditiBhandari]

This is what the code examples look like in the Box Model lesson. They shouldn't be highlighted in grey; that's only for inline code.

[AditiBhandari]

Also the code-blocks in the Make it Accessible lesson needs more padding-bottom so it looks more uniform with the rest of the code examples.

[JoeGermuska]

(this should probably be two separate issues...)

Regarding the first, this is user error. The code block was (effectively) inside a

tag, which led to this CSS from the step-block component to be applied.

I used the 'format' button in the lesson content editor, and the issue went away. So it could have been carelessness with closing tags, or a misunderstanding.

If we want to insulate against carelessness, we could change the step-block rules to only apply if a specific class is used, like ...

I can't think of anything we can do to bullet proof this any more, although I recognize that either choice is a bit error prone. I'd be inclined to argue for more care with the tags when using code-block instead of requiring the class when using code inline, since more care with tags is good anyway, and since the case you highlighted will probably jump out more during editing than would someone forgetting to apply the inline class.

So, fix for this: go back and edit the lesson content.

[JoeGermuska]

Regarding the second: this, too, is inconsistency in content editing. Cases where there is more space after the code are cases where there are one or more blank lines at the end of the code-block tag. This is a little confusing because the "matching" padding at the top is a side effect of choosing to style <code-block> on its own line. Because code-block implicitly carries a <pre> tag with it, there are certain semantics to how white space is handled. If we want indenting, we need to use whitespace: pre-wrap and that means that we have to be sensitive to whitespace at the top and bottom of the block also.

So, ultimately, this needs to be explained in a content-producer's handbook. We can choose the markup we like (to my taste, I prefer having the surrounding code-block tags on a line by themselves, but not requiring the extra whitespace which is now causing things to look the way @AditiBhandari prefers -- if we agree, then we can specify this and add the padding-bottom in CSS instead of expecting people to create it with a blank line.