Forum How do I...?

Margins between images

samuil
I'm trying to create a pdf containing images of equal size that are meant to be cut up after printing. At start, I believed I have an idea how to achieve it:

img {
  width: 50mm;
  height: 50mm;
  border: 1pt dashed black;
  border-width: 0 1pt 1pt 0;
}


This code almost works. There is major and a minor problem with this solution.

Minor one is, that dashed cut-paths are printed on the right and bottom sides of rightmost and bottommost images. Pure css solution (without pointing out which images are going to be rightmost and bottommost ones in xml) would be great.

Major one is, that margins between these images are not 0, even if I explicitly add rule margin: 0;. Removing whitespaces from xml file partially solves this, although it has impact only on horizontal gaps. How to get rid of vertical spacing?
mikeday
How about putting the images in a table instead, with collapsed borders between the cells, and no border around the outside of the table?
samuil
This stylesheet indeed solved minor problem. Cut-paths are visible only between images. Solution involved hard-coding number of rows and columns into xml file, but it works.

img {
  width: 50mm;
  height: 50mm;
}
table {
  border-collapse: collapse;
  border-style: hidden;
  page-break-after: always;
}
table td {
  width: 50mm;
  height: 50mm;  
  border: 1pt dashed black;
}


Still, having images in table doesn't affect strange margin that appears below every image. Removing margins and paddings from every possible element didn't help.
mikeday
Are the images really 50mm high? Can you try adding background color to some elements to see where the space is coming from?
samuil
Background debugging revealed that spaces between images belong to TD element.

Images are rescaled, even their aspect ratio is not preserved (it is almost preserved) They are not 50mm high, I just want them on paper to be that size.

EDIT:

Just to be sure, I replaced images with different images, from completely different source and problem persists.
mikeday
Probably the issue here is that images are inline elements, and are placed on the baseline of the current line, leaving a gap underneath. If you use "vertical-align: top" or bottom it should solve the problem.
samuil
Great! Solution worked, thanks for help.