How to create boxed text similar to this example in HTML and CSS?

Question

I came across an example of boxed text that looks like this:

(IMAGE) In this example, it is achieved using an image but I would like to achieve a similar effect in HTML and CSS, similar to the image above. I considered using <div>, but I need the boxes to be inline with the surrounding text.

What is the recommended way to implement this in HTML and CSS?

Answer 1

You can achieve this using the <span> tag.

Just add the text to be boxed in <span> ... </span> tags and style accordingly.

.texts span {
  background: #EEE;
  border: 1px solid #CCC;
  padding: 0 2px;
}

<div class="texts">

<p>The <span>yellow</span> background is added to <span>demonstrate</span> the footprint of the DIV element.</p>

<div>The <span>yellow</span> background is added to <span>demonstrate</span> the footprint of the DIV element.</div>

</div>

Note that by using a <div class="texts"> block around the text with the <span> tags you can create a CSS selector that will only style the spans inside that block.