Weird box model stuff??

I was trying to make some examples of elements in a list within a div, but found there to be whitespace between every element. Turns out that the linebreaks count as a character or something so it adds a space to the element. This isn't easily fixable with css or html by themselves. What a pain.

This is a regular style box

  <ul style="display: block;">
    <li>text 1</li>
    <li>text 2</li>
  </ul>

• text 1
• text 2

It fills up the entire space but has whitespace. Not very helpful

This is an inline-flex style box

  <ul style="display: inline-flex;">
    <li>text 1</li>
    <li>text 2</li>
  </ul>

• text 1
• text 2

It fills up only to fit the contents which might not be what I want, but more importantly DOESN'T have the whitespace. We would probably just place this in a div center wrapper and call it a day

Wtf so what do we do???

I found some helpful methods from this video.

We can do some REALLY jank stuff, for instance, remove the linebreaks:

  <ul>
    <li>text 1</li><li>text 2</li>
  </ul>

It works, but looks weird and gets cleaned up by your IDE's beautifier, which is a massive pain, especially if you've set it to do that on every save

We could also comment out the whitespace between the elements:

  <ul>
     <li>text 1</li><!--
  --><li>text 2</li>
  </ul>

Same as before, it gets messed up by your beautifier. Still not a very clean solution.

So I've just decided to use a wrapper and be done with it. (This is what I've done to draw it for this page)

  <div class="wrapper outline">
    <ul class="fix-inner">
      <li>text 1</li>
      <li>text 2</li>
    </ul>
  </div>

What a pain.