How to indent text without using margin or padding in html code?

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>

<h1>1.</h1><h3>Download app</h3> breaks my heart. I would rather do <h1><span>1.</span>Header</h1> or maybe even use CSS counters. — agrm
– agrm, Commented Nov 11, 2017 at 10:48

Temani Afif · Accepted Answer · 2017-11-11 10:56:17Z

3

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>

answered Nov 11, 2017 at 10:56

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

felixmosh · Accepted Answer · 2017-11-11 11:00:06Z

1

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>

answered Nov 11, 2017 at 11:00

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Comments

ankita patel · Accepted Answer · 2017-11-11 10:41:57Z

0

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>

answered Nov 11, 2017 at 10:41

ankita patel

4,2511 gold badge15 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to indent text without using margin or padding in html code?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related