Why is there an unexplainable gap between the validation and the InputTextArea elements?

Question

There seems to be a small gap between the InputTextArea and its validation. I've used F12 and there is no padding, margins ext. causing this gap. The normal InputText above it has no gaps at all but the area below does? I've attached the form the input elements are in and any CSS associated with it.

 <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>

        </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;
}

Please create a [minimally, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). We can't debug pictures. :-) — jme11, Feb 16 '23 at 09:21
I can't see the issue but my money would be that it's a space for text [descenders](https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/). MDN states that this is applied [inconsistently](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#baseline_inconsistency). Try setting it to `display: block` and see if it disappears. — Adam, Feb 16 '23 at 09:41
Aha this worked!! That's so bizarre I will definitely keep this in mind in future — Imogen, Feb 16 '23 at 09:53
I've tried this on firefox and firefox doesn't display the gap. Weird. I've htmlified your code and dropped an example below. — Adam, Feb 16 '23 at 09:54

Adam · Accepted Answer · 2023-02-16T10:04:38.103

1

It's to do with the space created for descenders (see article on more10.com). Note that firefox doesn't make space for the descender whereas Chrome does.

Inline display

Block display

Set textarea { display: block; } to remove it. Sample code below

textarea {
  width: 100%;
}

.block {
  display: block;
}

<textarea></textarea> Sample Text - gap
<textarea class='block'></textarea> Sample Text - smaller gap

edited Feb 16 '23 at 10:04

answered Feb 16 '23 at 09:53

Adam

5,495
2
7
24

1

*Note that firefox doesn't make space for the descender whereas Chrome does.* --> all the browsers do but since it depends on the font and other factors the space won't be the same – Temani Afif Feb 16 '23 at 10:36

Why is there an unexplainable gap between the validation and the InputTextArea elements?

1 Answers1