Put spacing effect at paragraph start

Asked

Viewed 1,091 times

6

Setting: I have a page of Terms of Service and responsibilities. Because it is very verbose, there are about 15 paragraphs. To generate the initial spacing of each paragraph I am using a conjunct of: 5   but I want to remove these  .

Question: how will I give this paragraph start effect without using this  ?

Page reduced 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>
html css

2 answers

7


You can use the property text-indent:

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>

  • I didn’t know this property text-indent

  • 1

    It is little used because in web is not in the habit of spacing paragraphs, as is commonly done in physical documents. But it has existed since version 1 of CSS.

  • 3

    By way of curiosity: The property text-indent was widely used to hide texts but still allow them to exist in HTML, which was used for better search engine positions (text-indent:-9999px), until this practice was discouraged by Google and since then has not been used as much.

4

How did I resolve this issue: I used the pseudo element :first-letter being 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.