How to indent and line break at the same time in HTML?

Question

I know that I can use   for a simple line break. I also know that I can add indentation by adding styling to a .

Now I have a problem, which is that  breaks two lines, it is almost like inserting  .

I cannot apply styling to   and also am unable to figure out how to prevent the double line break from .

Is there something like an element that does not break lines or similar? No matter what element I add to apply styling, they have that double line break, e.g. div.

The Look

What I want

some text
  some other text
    even more text

What I was able to achieve

This is what I get using three  with margin-left styling:

some text

  some other text

    even more text

This is what I can achieve with br:

some text
some other text
even more text

Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Andrzej Ziółek, Jun 27 '18 at 07:48
So you want to create element which won't cause line to break? — IiroP, Jun 27 '18 at 07:49
@AndrzejZiółek I thought the question was clear, sorry for that. — creativecreatorormaybenot, Jun 27 '18 at 07:55

score 1 · Accepted Answer · answered Jun 27 '18 at 07:58

1

Try using span elements with float: left; clear: both; and then use whatever margin-left you want.

answered Jun 27 '18 at 07:58

Chrillewoodz

27,055
21
92
175

That did it, thank you. I did not know how to make use of `span` before. – creativecreatorormaybenot Jun 27 '18 at 08:01

score 0 · Answer 2 · answered Jun 27 '18 at 08:02

0

You can use this trick to achieve your goal

span{
display:block;
text-indent:12px;
}
span samp{
display:block;
text-indent:24px;
font-family:initial;
}

<p>
  Some text
  <span>
    Some other text
    <samp>Some other text</samp>
  </span>
  
</p>

answered Jun 27 '18 at 08:02

Muhammad Tahseen ur Rehman

253
3
18

score 0 · Answer 3 · answered Jun 27 '18 at 08:05

A  (paragraph element) is a block-level element. This means, on default it will be positioned in a new row.

That's why you see a double linebreak.

So therefor, use inline elements like  to move the text to the right.

<p>some text<br/>
    <span style='margin-left:12px'>some other text</span><br/>
    <span style='margin-left:24px'>some more text</span></p>

score 0 · Answer 4 · answered Jun 27 '18 at 08:12

Deleting margins (margin-top and margin-bottom, most importantly) from p elements make them act like lines of text one below another and then use of   creates single linebreak. However if you want to add margin-left based on position of given p you can't do this without any SCSS or hard coding values for child number 1, 2, 3 and so on. Other posts on SO about same problem:

Post 1, post 2, post 3.

p {
  margin: 0;
}

<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>

How to indent and line break at the same time in HTML?

The Look

What I want

What I was able to achieve

4 Answers4