Javascript 在html div中的正方形之间留出空间？

我正在使用Laravel 5完成我的项目。我从数据库中获取一些整数值，并在Html中创建正方形（DIVS）。这是我当前的输出

你们可以看到，div之间的空间是垂直的，但在水平方向上它们是相互接触的。我想在正方形周围放置相同的空间

这是我当前的div创建代码

<section class="content">   
    <div class="box box-warning" align="center">
        <div class="gap">
            <div class="box-body" id="panel">                
                @foreach($rooms as $room)
                @if($room->roomState === 'Available')
                <div onclick="divClick('Available','{{ $room }}' );"  id='divelementone' style="width:150px;height:150px;border:1px solid #000;display:inline-block;background-color:#00a65a;border-radius: 5px;padding-left:10px;padding-right:10px;cursor:pointer;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
                @elseif ($room->roomState === 'UnAvailable')
                <div onclick="divClick('UnAvailable', '{{ $room }}');" id='divelementtwo' style="width:150px;height:150px;border:1px solid #000;display:inline-block;background-color:#ed5565;border-radius: 5px;padding-left:10px;padding-right:10px;cursor:pointer;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
                @elseif ($room->roomState === 'notCheckIn')
                <div onclick="divClick('notCheckIn', '{{ $room }}');" id='divelementthree' style="width:150px;height:150px;border:1px solid #000;display:inline-block;background-color:#FFC414;border-radius: 5px;padding-left:10px;padding-right:10px;cursor:pointer;">{{$room->room_code}}<br/> {{$room->roomState}}</div>   

                @endif
                @endforeach
            </div>
        </div>
    </div><!-- /.box --> 
</section><!-- /.content -->

@foreach（$room作为$room）
@如果（$room->roomState==‘可用’）
{{$room->room_code}}
{{{$room->roomState}
@elseif（$room->roomState=='UnAvailable'）
{{$room->room_code}}
{{{$room->roomState}
@elseif（$room->roomState=='noteckin'）
{{$room->room_code}}
{{{$room->roomState}
@恩迪夫
@endforeach

请期待专家的帮助。

在“gap”类中插入新行

margin-bottom:10px;

---

编辑当前的填充和边距，并在间隙类或内联中使用：

padding:0 10px;
margin:2.5px; //This will give a total of 5px margin between each box. put 5 px to get a total of 10px margin. 

---

它看起来像是一些标准的使用扩展css，如果你有许多公共属性，它将有助于调试

 <style>
    .square{
        width:150px;
        height:150px;
        border:1px solid #000;
        display:inline-block;
        background-color:#00a65a;
        border-radius: 5px;padding-left:10px;
        padding-right:10px;
        cursor:pointer;
        margin-bottom:5px;//new added property to for bottom space
        }
    </style>
    <section class="content">   
        <div class="box box-warning" align="center">
            <div class="gap">
                <div class="box-body" id="panel">                
                    @foreach($rooms as $room)
                    @if($room->roomState === 'Available')
                    <div onclick="divClick('Available','{{ $room }}' );"  id='divelementone' class="square" >{{$room->room_code}}<br/> {{$room->roomState}}</div>
                    @elseif ($room->roomState === 'UnAvailable')
                    <div onclick="divClick('UnAvailable', '{{ $room }}');" id='divelementtwo' class="square" style="background-color:#ed5565;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
                    @elseif ($room->roomState === 'notCheckIn')
                  <div onclick="divClick('notCheckIn', '{{ $room }}');" id='divelementthree' class="square" style="background-color:#FFC414;">{{$room->room_code}}<br/> {{$room->roomState}}</div>   

                    @endif
                    @endforeach
                </div>
            </div>
        </div><!-- /.box --> 
    </section><!-- /.content -->

.广场{
宽度：150px；
高度：150像素；
边框：1px实心#000；
显示：内联块；
背景色：#00a65a；
边框半径：5px；左侧填充：10px；
右边填充：10px；
光标：指针；
边距底部：5px；//为底部空间添加了新的属性
}
@foreach（$room作为$room）
@如果（$room->roomState==‘可用’）
{{$room->room_code}}
{{{$room->roomState}
@elseif（$room->roomState=='UnAvailable'）
{{$room->room_code}}
{{{$room->roomState}
@elseif（$room->roomState=='noteckin'）
{{$room->room_code}}
{{{$room->roomState}
@恩迪夫
@endforeach

添加

填充底部：10px@Satpal谢谢，我把这段代码分为三个部分添加，但输出还是一样的。@PranavCBalan，你能解释一下我应该在哪里输入这段代码吗？@uma:use
margin bottom
div@PranavCBalan谢谢。我将您的代码添加到div create元素样式表中，我的问题就解决了。谢谢。@uma，接受答案是表达感谢的更好方式！