Adjust border to content

Question

I have a simple grid with 2 columns with border and two columns Fiddle

The problem is I want to adjust the border to the content and the content has left padding, so I want to remove that free space.

I tried to use box-sizing: border-box; but it causes no effect

HTML:

<div class="totalContainer totalContainer__space" *ngIf="selectedMenuItem === menu[3]">
  <div class="totalContainer__text">
    <label><strong>Annual</strong> Test Test </label>
  </div>
  <div class="totalContainer__text totalContainer__result">
    <label><strong>80</strong></label>
  </div>
</div>

SCSS:

.totalContainer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 30px;
  border: 1px solid rgba(72, 82, 93, 0.8);
  border-radius: 12px;
  box-sizing: border-box;

  &__row {
    background-color: #E5E5E5;
  }

  &__space {
    padding: 10px 0 10px 140px;
  }

  &__text {
    font-size: 13px;
  }

  &__result {
    text-align: right;
  }
}

Answer 1

I think you are missing the big picture here.

Making up a block box in CSS we have the:

Content box: The area where your content is displayed, which can be sized using properties like width and height. Padding box: The padding sits around the content as white space; its size can be controlled using padding and related properties.

Border box: The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.

Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.

So in short the border includes the padding (it wraps the content as well as the padding), while the margin lays outside of it (pushing the content with border and padding included). I would recomand to check the box model docs.

Answer 2

Using margin-left instead of padding:

 &__space {
    padding: 10px 0 10px 10px;
    margin-left: 140px;
  }