Spacing ul And li Elements In CSS

This is the way I set up a list where the disc markers are inside the main bounding box and the text wrappers underneath itself inside of the disc marker

No Styles

<div class="example">
  <ul>
    <li>
      Alfa Bravo Charlie
    </li>
    <li>
      Hang tinsel from both branches.
      Heave the line over the port side.
      Help the weak to preserve their strength.
    </li>
  </ul>
</div>
  • Alfa Bravo Charlie
  • Hang tinsel from both branches. Heave the line over the port side. Help the weak to preserve their strength.

Remove List Style Type

<div id="remove_list_style_type" class="example">
  <ul>
    <li>
      Delta Echo Foxtrot
    </li>
    <li>
      Send the stuff in a thick paper bag.
      Set the piece here and say nothing.
    </li>
  </ul>
</div>
  • Delta Echo Foxtrot
  • Send the stuff in a thick paper bag. Set the piece here and say nothing. 
#remove_list_style_type {
  > ul {
      list-style: none;
    }
}

List Style Inside

(it looks like outside is the default?)

<div id="inside_style" class="example">
  <ul>
    <li>
      Send the stuff in a thick paper bag.
      Set the piece here and say nothing.
    </li>
    <li>Delta Echo Foxtrot</li>
  </ul>
</div>
  • Send the stuff in a thick paper bag. Set the piece here and say nothing.
  • Delta Echo Foxtrot
#inside_style {
  > ul {
    list-style: inside;
  }
}

Zeroing UL margin and padding

If markers/bullets are set to "outside" which I think is the default, they'll be outside the <ul> area. You could move them back in with `list-style: inside`` or remove them with `list-style: none``;

<div id="zero_margin_pad" class="example">
  <ul>
    <li>
      Send the stuff in a thick paper bag.
      Set the piece here and say nothing.
    </li>
    <li>Delta Echo Foxtrot</li>
  </ul>
</div>
  • Send the stuff in a thick paper bag. Set the piece here and say nothing.
  • Delta Echo Foxtrot
#zero_margin_pad {
  > ul {
    padding-left: 0;
    margin-left: 0;
  }
}

Zeroed no bullets

<div id="zeroed_no_bullets" class="example">
  <ul>
    <li>
      Send the stuff in a thick paper bag.
      Set the piece here and say nothing.
    </li>
    <li>Delta Echo Foxtrot</li>
  </ul>
</div>
  • Send the stuff in a thick paper bag. Set the piece here and say nothing.
  • Delta Echo Foxtrot
#zeroed_no_bullets {
  > ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
  }
}

Base Styles For This Page

This page is designed to make what's happening with the css as clear as possible. To help with that, there are no other positioning styles on this page other than those above and this set here:

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

.example {
  width: min(100% - 4rem, 50ch);
  margin-top: 2rem;
  margin-bottom: 2rem;
  background-color: #211;
}

.h2Section {
  border-top: 1px solid blue;
  padding-top: 0.7rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.htmlSection {
  padding-left: 2rem;
}