I am trying to create some spacing above and below the 'offer' button within my modal. Initially, I attempted to add a 30-pixel border to the bottom of the button, but it doesn't seem to be appearing. The end of the modal aligns directly with the end of the button, resulting in no space between them.
https://i.sstatic.net/f3NTF.png
CSS
.slidecontainer {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
h2 {
padding-top: 10px;
padding-bottom: 10px;
}
#offerButton {
border-bottom: 30px;
}
#inline {
display: flex;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 10px;
}
#text1 {
display: flex;
justify-content: space-between;
padding: 10px;
}
HTML/ANGULAR
<body>
<div id="text1">
<h2 class="text-center" id="offer">Offer: <span>${{offerVal}}</span></h2>
<h2 class="text-center" id="offer">Price: <span>${{price}}</span></h2>
</div>
<div class="slidecontainer text-center">
<input type="range" min={{min}} max={{max}} class="slider" id="myRange" [(ngModel)]="offerVal" name="slider">
</div>
<div class="text-center">
<button class="btn btn-success btn-sm" type="button" id="offerButton" (click)="offer()"> Offer </button>
</div>
</body>