display using foreach, but adjust space between row and columns

Question

I'm displaying same image for 24 times with 3 * 8 matrix in A4 size (using foreach ).

The problem is, i need to add space manually with every row and column. but it should not break the page. The 3 * 8 matrix should place in same page.

My css is

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

i'm asking how increase the space between two rows without page break.

IF i add width from 6.9 to 7.2 to increase, the eigth row goto second page, while printing

Answer 1

使用display：inline-block或display：inline CSS属性时，请删除空格（标记之间的空格/制表符）。

Answer 2

You could always add a margin to the top/bottom of the divs. This will put space between them and the next elements below them.

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".