求助：InputTextArea与ValidationMessage间莫名间隙原因排查

我的表单中，InputTextArea与其对应的ValidationMessage之间存在一处无法解释的小间隙。用F12开发者工具排查后，未发现padding、margin等样式属性导致该间隙，但上方的InputText组件却完全不存在此问题。相关代码如下：

表单代码 #

<EditForm Model=product OnValidSubmit="HandleSubmit">
    @* the model is passed to HandleSubmit as part of the EditContext*@
    <DataAnnotationsValidator />

    <div class="formSegment">
        <h1 class="heading">Product Registration Form</h1>
        <p class="headingText">Please fill out this form with the required information</p>
    </div>

    <div class="formSegment">
        <h4>product Information</h4>

        <label for="NameInput">Name:</label>
        <InputText id="NameInput" @bind-Value="product.Name" maxlength="100"></InputText>
        <ValidationMessage For="@(() => product.Name)" />

        <label for="KeywordsInput">Keywords:</label>
        <InputText id="KeywordsInput" @bind-Value="product.Keywords" maxlength="3000"></InputText>
        <ValidationMessage For="@(() => product.Keywords)" />
          
        <label for="DescriptionInput">Description:</label>
        <InputTextArea id="DescriptionInput" @bind-Value="product.Description" maxlength="3000" rows="3"></InputTextArea>
        <ValidationMessage For="@(() => product.Description)" />

        <label for="AdditionalInformationInput">Additional Information:</label>
        <InputTextArea id="AdditionalInformationInput" @bind-Value="product.AdditionalInformation" maxlength="3000" rows="3"></InputTextArea>
        <ValidationMessage For="@(() => product.AdditionalInformation)" />
                                  
        <button type="submit" class="btn-primary">Add</button>
        <button type="submit" class="btn-secondary">Cancel</button>
    </div>
</EditForm>    

样式代码 #

/*Section CSS*/
.heading {
    margin-bottom:0.35em;
    text-align: center;
}
    
.headingText {
    margin: 0.5em auto;
    text-align: center;
}
    
form {
    width: 60vw;
    max-width: 600px;
    min-width: 500px;
    margin: 0 auto;
    padding-bottom: 2em;
}
   
label {
    margin: 0.5rem 0;
    margin-bottom:auto
}
        
input {
    width: 100%;
    min-height: 2em;
}
  
textarea {
    width: 100%;
    min-height: 3em;
    max-height: 8em;
}

.formSegment {
    padding: 1rem 0;
    border-bottom: 3px solid #3b3b4f;
}
  
.formSegment:last-of-type {
    border-bottom: none;
}

原因分析 #

这个间隙来源于浏览器对<textarea>的默认样式差异：

• <input>在设置width: 100%后，会自动触发块级元素的布局行为，与后续的ValidationMessage（块级元素）无缝衔接；
• 而<textarea>默认是inline-block布局，即使设置了width: 100%，浏览器仍会保留行内元素的垂直对齐间隙，或者因默认的vertical-align: baseline属性，导致与下方元素产生微小间距。

解决方法 #

给<textarea>添加display: block样式，强制其变为块级元素，消除默认的行内布局间隙：

textarea {
    width: 100%;
    min-height: 3em;
    max-height: 8em;
    display: block; /* 新增该行 */
}

也可以统一所有表单控件的布局行为，确保InputText和InputTextArea样式一致：

input, textarea {
    width: 100%;
    display: block; /* 统一设为块级 */
    min-height: 2em;
}

textarea {
    min-height: 3em;
    max-height: 8em;
}

另外，修复代码中未闭合的InputText标签，避免潜在的布局异常：

<InputText id="KeywordsInput" @bind-Value="product.Keywords" maxlength="3000"></InputText>

内容的提问来源于stack exchange，提问作者Lisa