CSS: add background color to inline
text

Question

How do I get the gray background color as in this word which is inside an inline <pre></pre>?

Here is what I have done. From the code snippet, inline seems to be fine after the </pre> but not before <pre>.

pre.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<p>We use <pre class="inline">model</pre> to specify the statistical model.</p>

You should check [this out](https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets) first. You should probably use `code` as inline instead of `pre`. — Mihail Minkov, Dec 18 '18 at 03:59

score 2 · Accepted Answer · edited Dec 18 '18 at 06:35

2

Other way to solve the problem using 'div' and 'span'

    .inline {
    background-color: #80b3FF;
    border-radius: 4px;    padding: 3px
}

<div>We use <span class="inline">model</span> to specify the statistical model.

edited Dec 18 '18 at 06:35

Sushil Sharma

2,321
3
29
49

answered Dec 18 '18 at 06:22

Nandini Venkateshan

257
3
9

score 1 · Answer 2 · answered Dec 18 '18 at 04:01

This seems to be the result of the pre tag creating the new line despite being inline display. it works as expected if you change it to a span instead:

span{
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<p>We use <span>model</span> to specify the statistical model.</p>

Or Code if you want the monospace font by default:

code{
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<p>We use <code>model</code> to specify the statistical model.</p>

score 1 · Answer 3 · answered Dec 18 '18 at 04:05

It is because　pre is not a phrasing content . See here Use div instead.

pre.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<div>We use <pre class="inline">model</pre> to specify the statistical model.</div>

score 1 · Answer 4 · answered Dec 18 '18 at 04:06

Below is an image of what is rendered in browser with your code. And this pretty much explains the issue you are facing.

In order to solve this below are few ways. Use <div> instead of a <p>

pre.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<div>We use <pre class="inline">model</pre> to specify the statistical model.</div>

Use <code> instead of <pre>

code.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px;
}

<p>We use <code class="inline">model</code> to specify the statistical model.</p>

This link will help you understand a bit more about <code> and <pre>

And this link more about <p> element

CSS: add background color to inline text

4 Answers4

CSS: add background color to inline
text