The trick is to use the rem unit introduced in CSS3, which refers to the root element size. In mPDF, 1rem is equivalent to the font size of the HTML body element. All other elements which appear as blocks in the columns, such as headings, subheadings, and info boxes, need to have a vertical size which adds up to an exact multiple of the body text or its line-height. Using rem makes the calculation easier, and also means that changes to body text size will scale other elements proportionally. Text line-heights should be based on multiples of the body text line-height, such as 1.3rem for traditional 130% leading, or 2.6rem for double-spaced leading. However, the individual elements within a block do not need to have integer heights, enabling precise control over white-space. We can use a combination of top and bottom padding, margins or borders in the CSS file to get the layout we want
Tags