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

Question

p内的文字应与h3元素位于同一行，就像下图中的文字一样，但不使用margin或padding。对此有何解决方案？

.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

您可以简单地使用ol列表：

<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

将text-indent提供给p标记，如下所示：

.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

使用flex-box，您可以＆＃34;伸展＆＃34; h1占据右侧的整个高度。

＆＃13;

＆＃13;

.inner {
  display: flex;
}

h1,
h3 {
  margin: 0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;