Unwanted margin on divs/labels

[emilbroge]

Hi, i just found this library and it is just what i need. I am using it to create several sheets of individual labels form an excel sheet. I currently got it to work, but i have one problem with the html template that i have created. I cant figure out how to remove the small margin that occurs between each of the stickers on the page. The reason why this is a problem, is because i need to fit exactly 24 labels on one page with the correct margin, width and height - since the labels are gonna be printed on a label sheet paper (this model)

I think that maybe it is some autogenerated margin between each time a label is generated from my html template by blabel, but i do not know.

Here is my template_generate.html

<center>
<div class="label" align="center">
<p class="label_desc">{{sample_name}}</p><img src="{{label_tools.barcode(sample_id, barcode_class='code128', fmt='png', text_distance=1.0, module_height=5.0,quiet_zone=3.0,font_size=7)}}" class="label_img" alt="Could not generate barcode">
</div>
</center>

generate.py

from blabel import LabelWriter
import pandas, time, sys
print("Imported libraries")

skus_file = pandas.read_excel(r'2020_repair_form.xlsx',engine="openpyxl", na_filter=False)
print("Imported SKU file")

label_writer = LabelWriter("template_generate.html", items_per_page=24,
                           default_stylesheets=("style.css",))
print("Created label writer")

print("Generating records")
records = []
for x in range(len(skus_file.SKU)):
    if skus_file.SKU[x] == "":
        continue
    sku = skus_file.SKU[x]
    desc = skus_file.Description[x]
    temp_dict = dict(sample_id=sku, sample_name=desc)
    records.append(temp_dict)

print("Generating PDF file")
label_writer.write_labels(records, target='labels_spareparts.pdf')

style.css

* {
    margin: 0mm;
    padding: 0mm;
}
@page {
    width: 193.9mm;
    height: 271mm;
    padding: 13mm 8.1mm 13mm 8.1mm; 
    margin: 0mm;
}

.label {
    font-family: Arial;
    display: inline-block;
    font-size: 12px;
    max-width: 63.3mm;
    max-height: 33.9mm;
    width: 63.3mm;
    height: 33.9mm;
    margin: 0mm;
    padding: 0mm;
    overflow: hidden;
    background-color: green;
}
.label_img {
    image-rendering: pixelated;
    max-width: 85%;
    margin: 0mm;
    padding: 0mm;

}
.label_desc{
    max-width: 80%;
    margin: 0mm auto;
    padding: 0mm;

    text-align: center;
    padding-top: 5mm;
    padding-bottom: 3mm

}

The result i get:

The white lines indicated with the yellow arrow are unwanted.

I have already tried trimming the whitespace and almost everything that i could find, which is why i am asking here now.

[veghp]

Thanks for the feedback on this package! Based on this answer, add this to the CSS file:

body {
    font-size: 0;
}

[emilbroge]

Thank you! It worked perfectly :-)