Skip to content

Using <code> or <samp> within <pre> adds padding to the first line causing a small offset with other lines #705

Open
@vivienlacourba

Description

@vivienlacourba

Describe the issue

When a code block (using <pre><code>) contains multiple lines, the padding applies to the first line only causing a small offset.
cc @deniak who noticed this issue too.

Suggestion

When used in a <pre> there should be no padding applied to <code> or <samp> or <kbd> (as those will likely contains multiple lines).

URL

Example of page where this issue was spotted:
https://www.w3.org/guide/editor/editors-draft.html#guidelines

How to reproduce the issue

Adding the following markup is enough to reproduce this issue:

<p>Example 1: pre alone</p>
<pre>line 1
line 2
</pre>

<p>Example 2.1: pre+code - which shows the issue</p>
<pre><code>line 1
line 2
</code></pre>

<p>Example 2.2: pre+samp - which also shows the issue</p>
<pre><samp>line 1
line 2
</samp></pre>

<p>Example 2.3: pre+kbd - which does not have the issue as &lt;kbd&gt; does not currently have any specific padding applied</p>
<pre><kbd>line 1
line 2
</kbd></pre>

Screenshot of this example markup:

Image

Metadata

Metadata

Type

Projects

Status

📋 To do

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions