JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<div class="parent">
  <div class="container1">
    <div class="block1-1"></div>
    <div class="block2-1"></div>
  </div>
</div>

CSS

.parent {
  border: 2px solid blue;
}
.container1 {
/*   A or Bを指定するととmarginの相殺がなくなる
  A
  border-top: 1px solid orange;
  border-bottom: 1px solid orange; */


/*   B
  padding: 1px; */

  /*  C
 　margin-bottomの相殺はheightの指定が存在すると無効になる */
  height: 100%;

  margin-top: 40px;
  margin-bottom: 40px;
}

.block1-1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 50px;
}
.block2-1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 50px;
}