'How to indent a paragraph so that it aligns horizontally with above list items

I have the following CSS and HTML:

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  /*
  How do this need to be formulated so that the paragraph starts at
  exactly the same horizontal position as the text of the list items?
  */
  margin-left: 2em;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

I would like to horizontally align the paragraph with the list elements above it so that it starts at exactly the same location as the text of the list element. Just the text of the list items and the text of the paragraph should align, i.e. as shown in the below picture:

The indentation of the paragraph

Can this be done somehow?

htmlcssalignmentindentation


Solution 1:[1]

Unordered list (ol's) have a default padding-inline-start: 40px;. Meaning each child li is starting indented at 40px. So if you want your p to start where the li's start, I would add that same style.

You can adjust this padding-inline-start based on where you want your paragraph to start. However, 40px will get you right where your list items start.

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  padding-inline-start: 40px;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

Solution 2:[2]

check out the padding on the ol tag and then add margin-left:40px to the p tag

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  /*
  How do this need to be formulated so that the paragraph starts at
  exactly the same horizontal position as the text of the list items?
  */
  margin-left: 40px;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

Solution 3:[3]

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  /*
  How do this need to be formulated so that the paragraph starts at
  exactly the same horizontal position as the text of the list items?
  */
  margin-left: 2.5em;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron
Solution 2 DCR
Solution 3 Ritik Banger

Related Questions