使用foreach顯示，但調整行和列之間的空間

Question

我在A4 size（使用foreach）中顯示24 times with 3 * 8 matrix的相同圖像。

問題是，我需要手動添加每行和每列的空間。但它不應該打破頁面。 3 * 8矩陣應放置在同一頁面中。

我css是

foreach method 
    <div id="qr" style="display: inline-block; width:6.9cm; height:4cm;" > 
     (image) 
    </div> 
end foreach 

我要問怎麼不分頁增加兩行之間的空間。

如果我添加寬度從6.9到7.2，以增加，第8個行轉到第二頁，在打印時

Answer 1

當使用顯示：內聯塊，或顯示：內聯的CSS特性，取出白空間（空間/標籤在標籤之間）。

Answer 2

您可以隨時在div的頂部/底部添加邊距。這將在它們和它們下面的下一個元素之間留出空間。

margin: 10px 0px; // This will add 10px of space above AND below the div. 

margin-bottom: 10px; // This way you can specifically target a side of the "box".