css - 为啥打印中的 div 边距顶部模糊

Posted 2023-03-06

技术标签:

【中文标题】css - 为啥打印中的 div 边距顶部模糊【英文标题】：css - why div margin top in print blurredcss - 为什么打印中的 div 边距顶部模糊 【发布时间】：2021-05-19 02:19:33 【问题描述】：

我想用 bixolon 打印机制作条码标签打印页面，所以现在我制作了一个示例页面来测试它，在 chrome 打印预览配置中，我将边距设置为无，并将宽度设置为 10 厘米，高度设置为 2 厘米，我的元素 (div) 没有任何 margin-top 或 margin-bottom 表示这些属性具有 0px 作为值，并且它们具有 height 和 2cm 值作为我在浏览器打印中设置的打印页面大小预览配置，我在打印中设置了无边框，所以我认为元素必须固定在每个页面切片中，没有任何混乱，但是在某些页面之后的打印预览中，div 之间的垂直距离有些模糊。这是我的风格：

        @media print 
    .controls
    
        display: none;
    
    .label-box,.label-item
        border: 0 !important;
        border-style: hidden !important;
    
    * 
        -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
        color-adjust: exact !important;  /*Firefox*/
    

.controls
    width: 50%;
    direction: rtl;
    margin: auto auto;

.paper > div
    /*width: 2in;*/
    /*height: 0.75in;*/
    float: left;
    display: inline-block;
    text-align: center;

input
    display: block;
    color: #000 !important;

.paper
    text-align: center;
    margin: auto auto;
    display: table;

.clear
    clear: both;


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 
    -webkit-appearance: none;
    margin: 0;



input[type=number] 
    -moz-appearance: textfield;


@-webkit-keyframes spin 
    0%  -webkit-transform: rotate(0deg); 
    100%  -webkit-transform: rotate(360deg); 


@keyframes spin 
    0% transform: rotate(0deg);
    100% transform: rotate(360deg);


.label-box
    border: 1px solid;
    border-style: dotted;
    position:relative;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

.label-item
    min-height: 18px;
    width: 100%;
    white-space: nowrap;
    font-size: 10px;
    direction: rtl;
    /*border: 1px solid;*/
    display: table;
    clear: both;
    cursor: default;
    padding: 2px 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-touch-callout: none; /* ios Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */

aside 
    position:  absolute;
    right: 0;
    top: 0; 
    width: 200px;
    background: rgba(255,255,255,0.66);
    /*border: 2px  solid rgba(0,0,0,0.5);*/
    border-radius: 0px; padding: 8px;

#barcode_box
    position: relative;

#barcode_box img
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin: auto auto;

这是我的 html 代码：

<div class="paper"><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><br style="clear: both;"><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><br style="clear: both;"><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><br style="clear: both;"><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><br style="clear: both;"><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><br style="clear: both;"><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div><div class="element"><div class="barcode-label-container"><div class="barcode-label"><div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.2cm;"><aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:10px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUSIlj+N9+QP4/Qw2DPEP9AfkP7H/sH/D/AGHmfwwf2A8wfvgPFAFKMf7/UQNkjKoeVT2qelT1qOpR1aOqR1UPadUApLaHz3y/puAAAAAASUVORK5CYII="  ></aside><aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:10px;">رنگ پارچه 30 میل سبز هور</aside><aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.45cm;right:0cm;font-size:10px;">خرید هر عدد</aside></div></div></div></div></div>

我的流程有什么问题？谁能帮我解决我的问题？

【问题讨论】：

我将您的代码放在 HTML 文件中，没有发现任何问题。使用高度而不是边距 【参考方案1】：

我安装了bixolon驱动，我在打印机驱动程序中将纸张尺寸配置为width:10cm 和height:2cm，我在 css 中设置了以下样式：

 @media print 
 
 @page 
 size: 10cm 2cm;
 margin: 0;
 padding: 0;
 border-collapse: collapse;


.element

 display:inline-table;

在 html 中，我将 html div 更改为表格标记结构，例如：

<table>
 <tbody>
  <tr>
   <td class="element">
   <div class="barcode-label-container">
   <div class="barcode-label">
   <div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0cm;">
   <aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:12px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEtJREFUSIlj+N9+QP4/Q/3B//w/GOT/s///J8///w8DP3vzP4YP7AcYP4AYDPUHGP//qLF/wDCqelT1qOpR1aOqR1WPqh5VPaRVAwCkdWf5Rk3PnAAAAABJRU5ErkJggg=="  ></aside>
   <aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:12px;">کاغذ دکوپاژ طرح کاشی سایز A4 کد 6209</aside>
   <aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.35cm;right:0cm;font-size:12px;">خرید هر بسته</aside></div></div></div>
   </td>
   <td class="element">
   <div class="barcode-label-container">
   <div class="barcode-label">
   <div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.3cm;">
   <aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:12px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEtJREFUSIlj+N9+QP4/Q/3B//w/GOT/s///J8///w8DP3vzP4YP7AcYP4AYDPUHGP//qLF/wDCqelT1qOpR1aOqR1WPqh5VPaRVAwCkdWf5Rk3PnAAAAABJRU5ErkJggg=="  ></aside>
   <aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:12px;">کاغذ دکوپاژ طرح کاشی سایز A4 کد 6209</aside>
   <aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.35cm;right:0cm;font-size:12px;">خرید هر بسته</aside></div></div></div>
   </td>
   <td class="element">
   <div class="barcode-label-container">
   <div class="barcode-label">
   <div class="label-box" style="width:3cm;height:2cm;background-image:url()!important;margin-top:0cm;margin-left:0.3cm;">
   <aside draggable="true" id="barcode_box" class="label-item" style="display:block;top:0.5cm;right:0cm;width:cm;height:1cm;font-size:12px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAAyAQMAAACzqShEAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEtJREFUSIlj+N9+QP4/Q/3B//w/GOT/s///J8///w8DP3vzP4YP7AcYP4AYDPUHGP//qLF/wDCqelT1qOpR1aOqR1WPqh5VPaRVAwCkdWf5Rk3PnAAAAABJRU5ErkJggg=="  ></aside>
   <aside draggable="true" id="product_title_box" class="label-item" style="display:block;top:0cm;right:0cm;font-size:12px;">کاغذ دکوپاژ طرح کاشی سایز A4 کد 6209</aside>
   <aside draggable="true" id="pack_title_box" class="label-item" style="display:block;top:1.35cm;right:0cm;font-size:12px;">خرید هر بسته</aside></div></div></div>
   </td>
   </tr>
   </tbody>
   </table>

这样我的问题就解决了。

【讨论】：

以上是关于css - 为啥打印中的 div 边距顶部模糊的主要内容，如果未能解决你的问题，请参考以下文章

打印 CSS：顶部空白

CSS：父级没有边框时的边距顶部

一个 div 的 CSS 绝对定位受无关 div 中的边距影响

打印html页面时的边距

CSS边距折叠？

如果Chrome打印预览到达页面的下边距，则会在中间切断文本