Bootstrapのh-100のBoxの上下にスペースを作りたい

前提

discover_condo_room_boxというBoxの高さを揃えるためにh-100
を加えたのですが、Box間の上下のスペースを開けるために
margin-bottom: 30px;
を加えたのですが
Boxが大きくなるだけでスペースができない

実現したいこと

discover_condo_room_boxというBoxの上下にスペースを作りたい

該当のソースコード

HTML

<div className="container condo_container"> <div className="row mx-auto text-center"> <div className="col-6"> <div className="discover_condo_room_box h-100"> <p className="room_name">{roomName}</p> <div className="discover_condo_room_box_child"> <div className="discover_condo_room_box_ic"> <img src="" /> <img src="" /> <img src="" /> <img src="" /> </div> </div> </div> </div> </div> </div>

CSS

.discover_condo_room_box { position: relative; background-color: #1E3E75; padding:15px; border-radius: 10px; margin-bottom: 30px; border: solid #0D76BE;} .discover_condo_room_box_child { margin-top: 10px; display: flex; flex-wrap: wrap;} .discover_condo_room_box_ic { display: flex; margin: 0; margin: 10px;}