如何将复选框与 Flexbox 列表项中的段落文本对齐而不导致边距干扰？

Answer 1

不要将边距放在

p

元素上，而是将其放在包装上

div

s

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  margin: 1em;
}

ul ul {
  margin-left: 2em;
}

div {
  display: flex;
  align-items: start;
  gap: .5em;
  margin-bottom: 1em;
}

<ul>
  <li class="task-list-item">
    <div> <input type="checkbox">
      <p>
        <strong>Social Media Advertising Platforms (e.g., Facebook Ads, Instagram Ads)
        </strong>
      </p>
    </div>
    <ul>

      <li class="task-list-item">
        <div> <input type="checkbox">

          <p> <strong>Why</strong>: These platforms allow precise targeting based on demographics, interests, and behaviors. You can specifically target sports enthusiasts, bettors, and people interested in AI and analytics. Advanced targeting options and
            analytics can help refine your campaigns for better ROI and customer acquisition.
          </p>
        </div>
      </li>
    </ul>
  </li>
</ul>