在html div中創建正方形之間的空格？

我在做我的項目使用Laravel 5.我採取了一些整數值形式的數據庫，並在Html中創建廣場（DIVS）。這是我目前的輸出。在html div中創建正方形之間的空格？

可以看到，空間格之間垂直，水平，但它們相互接觸others.I要圍繞平方箱相同的空間。

這是我當前的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 -->

請期待一些專家的幫助。

來源

2015-11-06 uma

添加'padding-bottom：10px;' – Satpal

使用'margin' .... –

@Satpal謝謝你，我在三個div中添加了這個代碼，但仍然是相同的。 – uma

裏面你的「差距」類插入新行

margin-bottom:10px;

來源

2015-11-06 04:53:20

我在div創建元素樣式表中添加你的代碼，並解決了我的麻煩。謝謝。 – uma

@uma，*接受答案*是一種更好的方式來表達謝意！ – Rayon

編輯您當前的填充和保證金，並在您差距類或內嵌使用：

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.

來源

2015-11-06 05:04:47

其尋找一些標準使用extenal 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 -->

來源

2015-11-06 05:19:53

在html div中創建正方形之間的空格？

回答

相關問題