html - 如何删除textarea和父div之间的空间

Question

我有以下表单，其中包含如图所示的文本区域:

如您所见，蓝色阴影区域和父 div 底部之间有一个空间。

我怎样才能删除这个空间？

html:

    <div class="bottomBox">
        <h3>Free Quote Form</h3>
        <form class="freeQuoteForm" autocomplete="off">
            <div class="formFields">
                <input type="text" id="firstName" class="input" required><label class="formLabel" for="firstName">First Name</label><input type="text" id="lastName" class="input" required><label class="formLabel" for="LastName">Last Name</label>

            </div>
            <div class="formFields">
                <input type="email" id="email" class="input" required><label class="formLabel" for="email">Email Address</label>
            </div>
            <div class="formFields">
                <textarea rows="12" cols="50" id="sampleText" wrap="hard" class="input" required></textarea><label class="formLabel" for="sampleText">Please include a 1000 word sample from your document.</label>
        </form>
    </div>

CSS:

.bottomBox {
    background: white;
    margin: 30px auto;
    width: 640px;
    height: 700px;
    border: 1px solid #9c9c9c;
    animation: fadeIn 1.5s forwards, slideUpBottom 0.75s forwards;
}

.bottomBox h3 {
    text-align: center;
    padding: 20px 0;
}

.freeQuoteForm {
    margin: 0 auto;
    width: 530px;
    height: 550px;
    border: 1px solid #9c9c9c;
    text-align: left;
}

.formFields {
    border-bottom: 1px solid #9c9c9c;
    position: relative;
}

.input {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 200;
    border: none;
    display: inline-block;
    height: 60px;
    padding: 0px;
    background: transparent;
    padding-left: 12px;
    width: 50%;
    box-sizing: border-box;
    transition: background-color 0.5s ease-in-out;
}

.input:hover {
    background-color: #f9f9f9;
}


.formLabel {
    position: absolute;
    left: 10px;
    -webkit-user-select: none;
    cursor: pointer;
    color: #bfbfbf;
    font-size: 70%;
    line-height: 8em;
    padding-left: 5px; 
    height: 3px;
    -webkit-transform-origin: center left; 
    -webkit-animation: fadeIn 2s ease forwards;
}

#lastName { border-left: 1px solid #9c9c9c; }

#lastName + .formLabel { left: 52%; }

#email, #sampleText { width: 100%; }

#sampleText {
    height: 350px;
    padding-top: 20px;
    overflow: scroll;
    resize: none;
}

#sampleText + .formLabel {
    top: -6px;
}

.input:focus {
    outline:none;
    background-color: #e6f9ff;
}

.input:focus + .formLabel {
    -webkit-animation: colorScaleMove 0.75s ease-in-out forwards;
}


.input:valid + .formLabel { 
    -webkit-animation: colorScaleMoveGrey 0s ease forwards;  
}

#sampleText:valid + .formLabel {
    animation: fadeOut 0s ease forwards;
}

Answer 1

出现此问题是因为 block 级元素默认按基线(如文本)对齐。要修复它，只需设置 #sampleText vertical-align: top; 或 vertical-align: bottom;。我还建议您让它 overflow: auto;

演示:codepen