包含div应该等于内容，但它增加了额外的高度

Question

这是我的代码，它在JSfiddle中运行良好：

 .signup_form{
              margin: 0 auto;
              width: 40%;
              min-width: 320px;
}

.signup_form_button_row {
            height: auto;
            display: block;
            background: yellow;
            width: 100%;
            clear: both;
}

#signup_submit_button {
              color: white;
              padding: 2.4% 5%;
              font-weight: 700;
              font-size: 16px;
              text-transform: uppercase;
              width: 40%;
              display: block;
              border: none;
              border-radius: 0;
              margin: 0 auto;
              background-color: orange;
              text-align: center;
              width: 100%;
}

但是，在我的实际网站上，包含div（signup_form_bottom_row）会增加额外的高度，当它应该等于其内容时（signup_submit_button）。

如果有人能帮助我找出造成这个额外高度的原因，我们将不胜感激。

Answer 1

 和#e2ma_signup_submit_button之间有#e2ma_signup_reset_button个包装空格。如果移除不间断空格，则间隙消失。这是因为第一个按钮设置为100%宽度。 100%元素加上一个不间断的空格会将不间断的空格放到一个新的行，在那里它会为容器增加高度。