The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Spacing ul And li Elements In CSS

TODO: Pull subtitle into page object

No Styles

  • 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

  • Delta Echo Foxtrot
  • Send the stuff in a thick paper bag. Set the piece here and say nothing.

List Style Inside

(it looks like outside is the default?)

  • Send the stuff in a thick paper bag. Set the piece here and say nothing.
  • Delta Echo Foxtrot

Zeroing UL margin and padding

If markers/bullets are set to "outside" which I think is the default, they'll be outside the

  • Send the stuff in a thick paper bag. Set the piece here and say nothing.
  • Delta Echo Foxtrot

Zeroed no bullets

  • Send the stuff in a thick paper bag. Set the piece here and say nothing.
  • Delta Echo Foxtrot

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:

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

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

-- h2

No Styles


-- html
-- type: showabove

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


-- h2

Remove List Style Type

-- html
-- type: showabove

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

-- css
-- type: show

#remove_list_style_type {
  > ul {
      list-style: none;
    }
}


-- h2

List Style Inside 

(it looks like outside is the default?)

-- html
-- type: showabove

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

-- css
-- type: show

#inside_style {
  > ul {
    list-style: inside;
  }
}

-- h2

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``;

-- html
-- type: showabove

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

-- css
-- type: show

#zero_margin_pad {
  > ul {
    padding-left: 0;
    margin-left: 0;
  }
}


-- h2

Zeroed no bullets


-- html
-- type: showabove

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

-- css
-- type: show

#zeroed_no_bullets {
  > ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
  }
}




-- h2

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:

-- css
-- type: show


*, *::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;
}

-- categories
-- CSS 
-- WebDev 

-- metadata
-- date: 2020-12-12 20:20:58
-- id: 01esctzf
-- status: published
-- type: css-experiment
-- site: aws