html - Abnormal inline-block positioning after adding content

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65848706/abnormal-inline-block-positioning-after-adding-content

Answer 1

You need to set the vertical-align property of .deck-list-item to something other than the default of baseline. E.g. top:

.deck-list-container{
  background-color: rgba(0, 0, 100, 0.2);
}

.deck-list-item {
  padding: 5pt;
  position: relative;
  cursor: pointer;
  margin: 10pt;
  display: inline-block;
  background-color: white;
  border-radius: 0.8rem;
  height: 15rem;
  width: 10rem;
  vertical-align:top;
}

.deck-list-item:after {
  content: '';
  position: absolute;
  background-color: yellow;
  transform: translateY(0.5rem);
  height: 3rem;
  width: 2.5rem;
  right: 1rem;
  bottom: 0;
  clip-path: polygon(50% 25%, 100% 0, 100% 98%, 0 100%, 0 0);
}

<div class="deck-list-container">
  <div class="deck-list-add"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item">text</div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
</div>