js怎么设置div层左边距 及与顶部边距
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js怎么设置div层左边距 及与顶部边距相关的知识,希望对你有一定的参考价值。
参考技术A js设置style属性时。将“-”去掉,“-”后的字母大写。如:左边距 margin-left .用js 写就是 style.marginLeft='34px';
css - 为啥打印中的 div 边距顶部模糊
【中文标题】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>
这样我的问题就解决了。
【讨论】:
以上是关于js怎么设置div层左边距 及与顶部边距的主要内容,如果未能解决你的问题,请参考以下文章