How to remove space between li elements?

Question

I have section with list items , I am struggling to remove space between li element, I need some help please.

Here is jsfiddle: https://jsfiddle.net/g0z7v394/

Here is what I want:

Here is what I have so far:

.main-info {
  background-image: url('https://preview.ibb.co/hZw69K/drone.png');
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 60%;
  max-height: 600px;
  margin-left: 0;
  padding-left: 0;
  counter-reset: li;
}

ol>li {
  position: relative;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
  max-width: 50%;
  list-style: none;
}

ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}

li ol,
li ul {
  margin-top: 6px;
}

ol ol li:last-child {
  margin-bottom: 0;
}

<section class="info-section">
  <div class="main-info">
    <h2>Nature from air</h2>
    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
    <ol class="info-list">
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
    </ol>
  </div>
</section>

score 2 · Accepted Answer · answered Oct 04 '18 at 21:52

I suggest to use CSS multi-columns over flexbox in that case. And adjust the padding and margin on the li as needed.

ol {
  column-count: 2;
}

.main-info {
  background-image: url("https://preview.ibb.co/hZw69K/drone.png");
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  column-count: 2;
  counter-reset: li;
}

ol>li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
}

ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}

<section class="info-section">
  <div class="main-info">
    <h2>Nature from air</h2>
    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
    <ol class="info-list">
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
    </ol>
  </div>
</section>

hi stickers but this makes the text very long , did u check in jsfidle? how can i remove that center space? to get this https://i.stack.imgur.com/j98np.png ? — The Dead Man, Oct 04 '18 at 21:59
To reduce the list width just set `ol {max-width: 60%;}` or `li {max-width: 300px;}` or so. — Stickers, Oct 04 '18 at 22:11

score 0 · Answer 2 · answered Oct 04 '18 at 21:52

here is css .main-info {
  background-image: url('https://preview.ibb.co/hZw69K/drone.png');
  background-position: right center;
  background-repeat: no-repeat;
}

ol {
  display: flex;
  flex-direction: column;
  /* Make flex children pile up 'vertically'. */
  flex-wrap: wrap;
  /* Wrap children to next 'column'. */
  max-width: 60%;
  /* To prevent covering the drone image. */
  max-height: 600px;
  /* Set maximum height so columns will wrap. */
  margin-left: 0;
  /* Remove the default left margin */
  padding-left: 0;
  /* Remove the default left padding */
  counter-reset: li;
  /* Initiate a counter */
}

ol>li {
  position: relative;
  padding: 22px 41px;
  max-width: 50%;
  list-style: none;
}

ol>li::before {
  content: counter(li);
  /* Use the counter as content */
  counter-increment: li;
  /* Increment the counter by 1 */
  /* Position and style the number */
  position: absolute;
  top: -2px;
  left: -2em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* Some space between the number and the content in browsers that support
        generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}

li ol,
li ul {
  margin-top: 6px;
}

ol ol li:last-child {
  margin-bottom: 0;
}

<section class="info-section">
  <div class="main-info">
    <h2>Nature from air</h2>
    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>

    <ol class="info-list">
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
    </ol>
  </div>
</section>

Remove the margin from your CSS

ol > li
  {
   position: relative;
   padding: 22px 41px;
   max-width: 50%;
   list-style: none;
 }

joe what about center space? not only that bottom and top , here is the image of what I want https://i.stack.imgur.com/j98np.png — The Dead Man, Oct 04 '18 at 22:04

How to remove space between li elements?

2 Answers2