mPDFでfloat:leftを使って画像を並べると高さがずれてしまう問題を解決する #PHP

PHPと書いたけどHTMLのことしか書いてません。すみません。

mPDFで下記のHTMLをPDF化すると二段目以降が画像1つごとに高さがズレてしまう問題が発生する。

<head>
<style type="text/css">
    @page {
      margin: 0;
    }
    body {
      margin: 0;
    }
    div.imagebox {
       width: 46mm;
       height:46mm;
       float: left;
       margin-left: 2mm;
       margin-right: 2mm;
       margin-top: 1mm;
       margin-bottom: 1mm;
    }
    div.wrapper {
        width:100%;
        margin-top:4mm;
        margin-left:6mm;
    }
    img {
       width: 46mm;
       height:46mm;         
    }
</style>
</head>
<body>
<div class="wrapper">
    <div class="imagebox">
       <img src="images/photo1.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo2.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo3.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo4.jpg">
    </div>

    <div class="imagebox">
       <img src="images/photo1.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo2.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo3.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo4.jpg">
    </div>

    <div class="imagebox">
       <img src="images/photo1.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo2.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo3.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo4.jpg">
    </div>
</div>

</body>

どうやら各画像を囲っているdivタグごとにmarginの指定をするのが影響するらしいので、下記のように書き換える

<head>
<style type="text/css">
    @page {
      margin: 0;
    }
    body {
      margin: 0;
    }
        div.image-col {
           margin-top:1mm;
           margin-bottom:1mm;
        }
    div.imagebox {
       float: left;
       width: 46mm;
       height:46mm;
       margin-left: 2mm;
       margin-right: 2mm;
    }
    div.wrapper {
        width:100%;
    }
    img {
       width: 46mm;
       height:46mm;         
    }
</style>
</head>
<body>
<div class="wrapper">
    <div class="image-col">
    <div class="imagebox">
       <img src="images/photo1.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo2.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo3.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo4.jpg">
    </div>
    </div>
    <div class="image-col">
    <div class="imagebox">
       <img src="images/photo1.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo2.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo3.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo4.jpg">
    </div>
    </div>
    <div class="image-col">
    <div class="imagebox">
       <img src="images/photo1.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo2.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo3.jpg">
    </div>
    <div class="imagebox">
       <img src="images/photo4.jpg">
    </div>
    </div>
</div>

</body>

これで段差ができてしまう問題が解決できた。