如何缩进文本而不在HTML代码中使用边距或填充？

Question

Text inside the p should start in the same line with the h3 element just like in the image bellow, but without using margin or padding . Any solution for this?

 .inner h1, h3{ display: inline-block; vertical-align: text-bottom; } 

 <div class="inner"> <h1>1.</h1> <h3>Download app</h3> <h3>Free</h3> <p> Some text here Some text here Some text here</p> <p> Some text here Some text here Some text here</p> </div> 

Answer 1

You may simply use ol list for this :

 <ol> <li> <h3>Download app<br/>Free</h3> <p> Some text here Some text here Some text here<br/>Some text here Some text here Some text here</p> </li> </ol> 

Answer 2

Give text-indent to p tag like this:

.inner p {
  text-indent: 23px;
}

 .inner h1, h3{ display: inline-block; vertical-align: middle; } .inner p { text-indent: 23px; } 

 <div class="inner"> <h1>1.</h1><h3> Download app</h3> <h3>Free</h3> <p> Some text here Some text here Some text here</p> <p> Some text here Some text here Some text here</p> </div> 

Answer 3

Using flex-box you can "stretch" the h1 to take the entire height of the right side.

 .inner { display: flex; } h1, h3 { margin: 0; } 

 <div class="inner"> <h1>1.</h1> <div> <h3>Download app Free</h3> <p> Some text here Some text here Some text here</p> <p> Some text here Some text here Some text here</p> </div> </div>