css Question posted in
Some basic documentation can be found here.

Css – list-items and ordered-list have weird spacing when working with columns

I’m using a columns property to break this ordered list and the children list items to create a two-column display. I’m also adding some bottom margin on the list-items to add some spacing between the elements.

In the "three section preview", if you inspect the ordered list, the bottom of the list butts right up to the bottom of the paragraph (as it should).

screenshot showing no extra space between the bottom of list item and beginning of the margin, as intended

However, if the columns are equal in height, there’s some hidden spacing at the bottom of the ordered list as seen here:

screenshot showing additional padding at the bottom of the ordered list

This isn’t any margin or padding on the list items or paragraphs. You can see I’m setting the paragraph margin to 0.

Now it seems to be caused by an issue between using columns and margin-bottom. If you remove the margin-bottom on the <li> that mysterious gap disappears. But the margin-bottom shouldn’t be causing any spacing between on the <ol> parent. To prove this, that’s why I have the first "three section preview". Those list-items also have a margin-bottom but, as illustrated in the first screenshot above, there’s no mysterious padding.

What could be causing this additional spacing? Any thoughts are appreciated.

What I’ve tried:

My goal here is to figure out what’s causing the mysterious spacing between the list-items and ordered-list. I’ve narrowed it down to the margin-bottom on the list-items but that shouldn’t be impacting the spacing, as illustrated. I’ve tried using a margin-top instead of a margin-bottom but I still have the mysterious space if there are two list-items within the ordered-list.

.columns {
  -webkit-columns: 2;
  columns: 2;
  -webkit-column-gap: 3rem;
  column-gap: 3rem;
}

.item {
  break-inside: avoid;
}

p {
  margin: 0;
}

li {
  margin-bottom: 15px;
}

li:last-of-type {
  margin-bottom: 0;
}
<h2>
  three section preview
</h2>
<ol class="columns">
  <li class="item">
    Section 1
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 2
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 3
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
</ol>

<hr />

<h2>
  two section preview
</h2>

<ol class="columns">
  <li class="item">
    Section 1
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>
  </li>
  <li class="item">
    Section 2
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
</ol>
Tags:

2

Answers


  1. 0

    The problem is in your li:last-of-type selector. Because you have multiple lis, it only targets the very last one (in this case, the one on the right column), therefore leaving some margin on the bottom of the li on the left column.

    Unfortunately, according to this StackOverflow answer, it doesn’t look like what you are looking for is possible. I would suggest using flexbox as an alternative.

    Login or Signup to reply.
  2. 0

    Try using padding-bottom instead of margin-bottom on the li. Then, you should be able to remove the last-of-type rule.

    If you need the margin-bottom on the li, try setting the column grid on the ol…

    .columns {
  /*
  -webkit-columns: 2;
  columns: 2;
  -webkit-column-gap: 3rem;
  */
  column-gap: 3rem;
  background-color: pink;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.item{
  break-inside: avoid;
  background-color: yellow;
}

p{
  margin: 0;
}

li{
  margin-bottom: 15px;
}
/*
li:last-of-type{
  margin-bottom: 0;
}
*/
    <h2>
 three section preview
</h2>
<ol class="columns">
  <li class="item">
    Section 1
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 2
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 3
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
</ol>

<hr />

<h2>
 two section preview
</h2>
<ol class="columns">
  <li class="item">
    Section 1
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
  <li class="item">
    Section 2
    <p class="css-r2plao-StyledText e1rr8m5s0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iacul.</p>

  </li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search