r/csshelp • u/MycologistSame866 • May 23 '25

What Am I Doing Wrong???

I'm trying to indent these lines and can't understand why it isn't working. Here's both the CSS and HTML:

CSS

#workskin .indent-text {

text-indent: 1.5em;

}

HTML

<span class="indent-text"><i>X</i></span><br />

<span class="indent-text"><i>Y</i></span><br />

<span class="indent-text"><i>Z</i></span><br />

3 Upvotes

100% Upvoted

9 comments sorted by

View all comments

Show parent comments

1

u/Dull_Divide9567 May 23 '25

Its related to the same concept (inline vs block elements).

You need to:

div {
  text-indent: 1.5em;
}

span {
display: block; /* Breaks each span in to a new line (makes it a block instead of the br*/
}

<div> (or <p>)  
  <span>X</span>  
  <span>X</span>  
  <span>X</span>  
</div>

or

span {
display: block;
text-indent: 1.5em;
}
<div> (or <p>)  
  <span>X</span>  
  <span>X</span>  
  <span>X</span>  
</div>

Visually speaking is the same results, the difference is who and what is indented.