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

Question

我使用 Laravel 5 做我的元素。我从数据库中获取一些整数值并在 Html 中创建正方形(DIVS)。这是我当前的输出。

您可以看到，div 之间的空间在垂直方向上，但在水平方向上它们相互接触。我想在方 block 周围创建相同的空间。

这是我当前的 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 -->

请期待一些专家的帮助。

Answer 1

在你的“gap”类中插入一个新行

margin-bottom:10px;