Space between two row classes in HTML (Angular) - html

Question

I have 3 rows with 2 columns in each row on my HTML page with some labels and inputs.
I see a lot of space between the rows which I tried removing but didn't work. Is there a way to do it?
Here's the HTML Code :
<div >
<h1>
New Patient Record
</h1>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="column"></div>
<div class="column">
<label > <strong>Date</strong> </label>
<input type="date" name="date" id="date" class="form-control" [(ngModel)]="institutes.date">
</div>
</div>
<div class="row" style="padding-top:0px" >
<div class="container" style="padding-left: 7.5%" >
<form #institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)">
<div class="form-group">
<div class="row">
<div class="column">
<h2><strong> Symptoms</strong> </h2>
<input type="text" name="symtoms" id="symtoms" class="form-control"[(ngModel)]="institutes.symtoms">
<br>
<h2><strong>Diagnosis</strong></h2>
<label> <strong>Condition</strong> </label>
<input type="text" name="condition" id="condition" class="form-control"[(ngModel)]="institutes.condition">
<label><strong> Advice </strong></label>
<input type="text" name="advice" id="advice" class="form-control"[(ngModel)]="institutes.advice">
<br>
</div>
<div class="column">
<h2> <strong>Prescription</strong> </h2>
<br>
<label><strong> Medication </strong></label>
<input type="text" name="medication" id="medication" class="form-control"[(ngModel)]="institutes.medication">
<label><strong> Medicine Type </strong></label>
<input type="text" name="type" id="type" class="form-control"[(ngModel)]="institutes.type">
<label><strong>Course</strong></label>
<input type="text" id="course" name="course" class="form-control"[(ngModel)]="institutes.course">
<label><strong> How many per day? </strong></label>
<input type="text" name="cday" id="cday" class="form-control"[(ngModel)]="institutes.cday">
<br>
</div>
<div class="row">
<div class="column"></div>
<div class="column">
<button id="record" class="btn btn-primary" type="submit" >Add Record</button>
</div>
</div>
</div>
<br><br>
</div>
</form>
</div>
Here's what all I tried: I tried to adjust row spacing using margins, and padding but none of them worked. Is there any other alternative for this?
.modal-dialog.cascading-modal.modal-avatar .modal-header img {
width: 130px;
margin-left: auto;
margin-right: auto;
}
.modal-dialog.cascading-modal.modal-avatar .modal-header {
margin: -6rem 2rem -1rem 2rem;
}
.More{
color: blue;
margin-right: 100px;
}
.column{
margin : 100px;
}
.row{
margin:0;
padding:0;
align-items: baseline;
}

Answer 1

Changing:
.column{
margin: 100px;
}
To
.column{
margin-left : 100px;
margin-right: 100px;
}
Will remove the space between the rows. Is that the end result you're looking for?

Answer 2

Adjusting the margin-left helped me solve the issue.
Also using to add number of empty spaces vertically solved my UI design issues.

Answer 3

For the space between both rows, you can add the padding-bottom
style="margin-top:-50px"