尽管高度和宽度相同，但子div不会掩盖父div

Question

我有一个父div，它在单击子div时充当背景。运行代码看看我的意思。背景为绿色。虽然父和子div具有相同的高度和宽度，但我可以在子div后面看到父div的轮廓。它几乎就像一个边界。如何确保子div精确地覆盖父div？

.text-body-50 {display: flex;
  flex-wrap:wrap;
  justify-content:center;
  width: 100%;
  height: 50%;
  margin 0 auto;}

.one-third-text {width: 33.3333%;height: 50%;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center; }

.text-btn-bg { background: #2ecc71; height:100%; width:100%; }

.text-btn {
    display:table;height:100%; width:100%;background:#f6f6f6;
    margin-right: 0px;
    cursor: pointer;
    margin: 0 auto;
    -webkit-transition: -webkit-transform .07s ease-out; 
   -moz-transition: -moz-transform .07s ease-out; 
   -o-transition: -o-transform .07s ease-out; 
    transition: transform .07s ease-out; 
}

.text-btn:active, .text-btn.text-btn-android { 
    -webkit-transform: scale(0.9, 0.80);
    transform: scale(0.90, 0.80);
    /*opacity: 0.80;*/
    color:#2ecc71;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

<div class="text-body-50">
        <div class="one-third-text">
            <div class="text-btn-bg">
                <div class="text-btn" >
                    <h3 class="h3-text-btn">haha</h3>
                </div>
            </div>
        </div>
</div>

Answer 1

尝试添加

.h3-text-btn {
  margin: 0;
  padding: 0;
}