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

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:

Can this be done somehow?

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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