BoxModelPrototype

index.pug

div.wrapper
  .box

    .compensator-wrapper
      .compensator.compensator--top t10
      .compensator--hor
        .compensator.compensator--left l10

        .margin-wrapper
          .margin.margin--top t10
          .margin--hor
            .margin.margin--left l10

            .padding-wrapper
              .box-sizing.box-sizing--border
              .padding.padding--top t10
              .padding--hor
                .padding.padding--left l10
                .content 
                  .box-sizing.box-sizing--content
                  | 100x100
                .padding.padding--right r10
              .padding.padding--bottom b10

            .margin.margin--right r10
          .margin.margin--bottom b10

        .compensator.compensator--right r10
      .compensator.compensator--bottom b10

style.scss

.wrapper {
  height: 200px;
  display: flex;

  background-image: linear-gradient(90deg, black 0, white 1px),
    linear-gradient(0, black 0, white 1px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;
}

.box {
  margin: auto;
  opacity: 0.75;
}

.box-sizing {
  position: absolute;
  border: 1px solid blue;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  &--content {
    display: none;
  }

  &--border {
  }
}

.content {
  position: relative;
  width: 100px;
  height: 60px;

  background-color: lightgreen;
  background-image: linear-gradient(90deg, black 0, white 1px),
    linear-gradient(0, black 0, white 1px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.compensator {
  background-color: lightyellow;

  display: flex;
  align-items: center;
  justify-content: center;
}

.compensator-wrapper {
  position: relative;
}

.compensator--hor {
  display: flex;
  align-items: stretch;
}

.compensator--top {
  height: 0;
  height: 20px;
}

.compensator--left {
  width: 0;
  width: 40px;
}

.compensator--right {
  width: 0;
}

.compensator--bottom {
  height: 0;
}

.margin {
  background-color: lightcoral;

  display: flex;
  align-items: center;
  justify-content: center;
}

.margin-wrapper {
  position: relative;
}

.margin--hor {
  display: flex;
  align-items: stretch;
}

.margin--top {
  height: 20px;
  height: 0;
}

.margin--left {
  width: 40px;
  // width: 0;
}

.margin--right {
  width: 40px;
}

.margin--bottom {
  height: 20px;
}

.padding {
  background-color: lightblue;

  display: flex;
  align-items: center;
  justify-content: center;
}

.padding-wrapper {
  position: relative;
}

.padding--hor {
  display: flex;
  align-items: stretch;
}

.padding--top {
  height: 20px;
}

.padding--left {
  width: 40px;
  width: 0;
}

.padding--right {
  width: 40px;
}

.padding--bottom {
  height: 20px;
}