Place spacing effect at beginning of paragraph

6

Scenario : I have a Terms of Service page and responsibilities. For being very verbose, there are about 15 paragraphs. To generate the initial spacing of each paragraph I am using a set of: 5   however I want to remove these   .

Question : How do I give this paragraph start effect without using this   ?

Reduced page HTML :

<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS
</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS
</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS
</p>
    
asked by anonymous 03.08.2015 / 15:03

2 answers

7

You can use the text-indent property:

p {
    text-indent: 50px;
}
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
    
03.08.2015 / 15:08
4

As I did to solve this question: I used the pseudo :first-letter element as follows:

CSS :

p:first-letter {
    margin-left: 3em;
}

HTML :

<p>
TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS
</p>
<p>
TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS
</p>
<p>
TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS TOS
</p>
    
03.08.2015 / 15:16