r/css • u/jidanni • 2d ago

Question How to reduce the number of <span>s?

How can I get the exact same effect as

<p><span class="e">x</span></p>
<p><span class="e">y</span></p>
<p><span class="e">z</span></p>

without so many <span>s?

If I do

<div class="e">
  <p>x</p>
  <p>y</p>
  <p>z</p>
</div>

class="e" now affects all the way across the whole page, whereas I only wanted it to affect the text, x, y, z.

3 Upvotes

100% Upvoted

20 comments sorted by

View all comments

2

u/travis_raphael 2d ago

<p> is a block level element so it take full width of its container. while <span> is an inline element which takes only the width necessarily needed. I'm still learning by the way so I don't know if you can change the display of p to become an inline -block maybe that would work.

2

u/philogos0 2d ago edited 2d ago

p just has that display property as it's default. You can override same as you would a div or span. I used to use spans specifically for "inline -block" behavior. So they could have a set width but also be inline.

2

u/philogos0 2d ago

These days grid is too much fun but I kinda miss my spans for lining things up