Is there an HTML tag I can use to encapsulate other content for styling purposes without impacting the layout, such as setting the background color? This is particularly relevant when the nature of the content (inline or block) is not known in advance.
Consider the following HTML snippet:
<p>This is a paragraph with some text in it</p>
<div>
<p>Some text</p>
</div>
If we want to highlight "Some text" in yellow by enclosing it like this:
<p>This is a paragraph with <yellow>some text</yellow> in it</p>
<yellow>
<div>
<p>Some text</p>
</div>
</yellow>
What element should be used for <yellow>?
You might suggest using <div>, but that would interfere with the paragraph structure even with 'display: inline' applied.
The closest solution seems to be utilizing <span> together with 'display: inline-block'.
.yellow {
background-color: yellow;
display: inline-block;
}<p>This is a paragraph with <span class="yellow">some text</span> in it</p>
<span class="yellow">
<div>
<p>Some text</p>
</div>
</span>However, this method does introduce some impact on layout (e.g., moving bullet points down):
.yellow {
background-color: yellow;
display: inline-block;
}<div style="width: 100px">
<ul>
<li><span class="yellow">some text blah blah blah</span></li>
</ul>
</div>Is there an element that truly has no impact on layout?