использование «строки» и «столбца» в Angular (Flexbox) создает много вертикального пространства между HTML полями ввода

Question

Я пытаюсь иметь 2 поля ввода в той же строке . Для этого я использовал Flexbox. Я заметил, что при использовании row и column с Flex создается дополнительный интервал, как показано на рисунке ниже:

Ниже показано, как структура кода настроена

apidefs-disp.component. html

<div class="flex-disp-apidefs-container">
    <div class="flex-disp-apidefs-list">

        <kdc-apidefs-list></kdc-apidefs-list> 
    </div>
    <div class="flex-disp-apidefs-form">
        <kdc-apidefs-form></kdc-apidefs-form> 
    </div>
</div

apidefs-form.component. html

        <div class="row">

            <!-- Name -->
            <div class="col">
                <div class="md-form">

                    <input required type="text" id="materialapidefsFormName" class="form-control"
                        aria-describedby="materialapidefsFormNameHelpBlock" mdbInput formControlName="name" />

                    <label for="materialapidefsFormName">Name</label>
                    <mat-error
                        *ngIf="apidefsForm.controls['name'].hasError('required') && apidefsForm.controls.name.touched">
                        Name is required
                    </mat-error>

                    <mat-error
                        *ngIf="apidefsForm.controls['name'].hasError('maxLength') && apidefsForm.controls.name.touched">
                        maximum Length is 25
                    </mat-error>
                </div>
            </div>

            <!-- Description -->
            <div class="col">
                <div class="md-form">

                    <input required type="text" id="materialapidefsFormDescription" class="form-control"
                        aria-describedby="materialapidefsFormDescriptionHelpBlock" mdbInput
                        formControlName="description" />

                    <label for="materialapidefsFormDescription">Description</label>
                    <mat-error
                        *ngIf="apidefsForm.controls['description'].hasError('required') && apidefsForm.controls.description.touched">
                        Description is required
                    </mat-error>

                    <mat-error
                        *ngIf="apidefsForm.controls['description'].hasError('maxLength') && apidefsForm.controls.description.touched">
                        maximum Length is 50
                    </mat-error>
                </div>
            </div>
        </div>

[... snip ...]

apidefs-disp.component.s css

.flex-disp-apidefs-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: auto;
}

.flex-disp-apidefs-list {
    display: flex;
    flex-direction: column; 
    //width:100%;
    flex:2;
}

.flex-disp-apidefs-form {
    display: flex;
    flex-direction: column; 
    //width: 100%;
    flex:4;
}

apidefs-list.component.s css

NOTHING

apidefs-form.component.s css

.text-center {
    width: 100%;
}

 .flex-apidefs-form{
    display:flex;
    width: 100%;
    padding: 30px;
    background-color: var(--accent-lighter-color);

 }

ВОПРОС : как я могу уменьшить вертикальное расстояние между двумя наборами полей ввода?

Любая помощь, советы или рекомендации будут с благодарностью.

TIA

ETA В настоящее время возникает проблема, возникающая при попытке скопировать код в Stackblitz (похоже, это относится к продукту, за который я заплатил - не уверен, следует ли добавлять платный продукт в stackblitz)

* 106 0 * Видя, как можно прийти к этому вопросу ...

Answer 1

Я пошел дальше и изменил display для класса с 'flex' на 'grid'. Кажется, проще в использовании (по крайней мере, один не должен определять row и col везде). Кроме того, выяснилось, что в следующем классе md-form есть "дополнительная обивка", которая отбрасывает размеры (я столкнулся с похожим случаем, когда у html p tag был побочный эффект (аналогичный тому, который упоминался выше) Поэтому я сделал следующее:

.grid-apidefs-form .md-form {
    margin: 0em;
    height: 4em;
}

, чтобы переопределить его (сбросив margin на 0) и установив новую высоту 4em.

Теперь все работает.