still keeping some vertical space while list-style: none is defined.

https://product-landing-page.freecodecamp.rocks/#how-it-works

If you check this project and scroll to pricing labels there is defined exactly like mine and it behave differently.

My price label:

Project's label

MY CSS:

/* ========== PRICE ======= */

#cost {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.lvl {
  background-color: #dddddd;
  text-align: center;
  font-size: 1.4em;
  color: rgb(65, 65, 65);
  padding: 5px;
  width: 100%;
}
#cost ol li {
  padding: 5px 0;
  margin: 0;
}

li {
  list-style: none;
}

Project's CSS:

#pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.product > .level {
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

.product > h2 {
  margin-top: 15px;
}

.product > ol {
  margin: 15px 0;
}

.product > ol > li {
  padding: 5px 0;
}

Maybe someone can explain it to me so i can understand what is happening here

CodePudding user response：

If you look at all the CSS that is being applied to that ol element you'll notice that there is a setting of everything (*) which includes padding: 0;

This overrides the browser's default settings for padding related to ol elements.

You may or may not want to set padding: 0 for everything at the start. It depends on your precise use case.

As in the case of the site you reference, something like this can be seen at the top of some stylesheets - meaning the author will add any padding and margin settings themselves rather than relying on default browser settings.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[The box-sizing setting means e.g. padding and border dimensions are included in the dimensions of the element].

If you don't want such a global approach to unsetting padding then put the padding: 0 in the style setting for the ol element itself. For example: [I can't tell exactly what this should be as I don't know your HTML stucture]

#cost ol {
  padding: 0;
}

CodePudding user response：

Just add padding: 0

ul, ol {
list-style:none;
padding:0;
}