JSFiddle - React, Tailwind, and code Playground

by OliverJAsh2

HTML

<h2>items use top</h2>
<p>If the gutter item is also a flex item, it will be positioned above any previous elements, because (IIUC) flex items create a stacking context. For that reason, any previous elements which are styled to appear below the negated padding will not be clickable/accessible.</p>
<div class="test top">
  <button>try to click me</button>
  <div class="content flex">
      <div class="item">foo</div>
  </div>
  <button>try to click me</button>
</div>
<h2>items use bottom</h2>
<p>As I mentioned previously, flex items create their own stacking contexts, but this does not cause them to be positioned above subsequent elements—only prior elements. For that reason, elements which appear after the gutter container will be clickable/accessible.</p>
<div class="test bottom">
  <button>try to click me</button>
  <div class="content flex">
      <div class="item">foo</div>
  </div>
  <button>try to click me</button>
</div>

CSS

button {
    width: 100%;
}

.content {
    border: 1px solid;
    
    display: flex;
}

.top .content {
  margin-top: -20px;
}

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

.item {
    border: 1px solid;
    background-color: yellow;

    width: 50%;
}

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

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