网页打印条码标签时Grid自动添加边距，售价打印错位求助

1. 重置打印页面默认边距 #

浏览器打印默认会添加页面边距，需通过@page规则强制重置，解决预览时自动加边距的问题：

@media print {
  @page {
    margin: 0;
  }
}

2. 修复打印样式选择器错误 #

原代码中body *, { ... }多了冗余逗号导致样式失效，同时要精准控制打印显示的元素：

@media print {
  body * {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 仅显示条码容器及其子元素 */
  .main__, .main__ * {
    display: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

3. 解决内容分页拆分（售价下移） #

给每个条码容器添加page-break-inside: avoid，禁止浏览器将单个条码拆分成两页：

@media print {
  .pagebreak {
    page-break-inside: avoid !important;
  }
}

4. 清理混乱的Grid布局定义 #

原.main__重复定义多次grid-template-columns，仅保留有效配置即可：

.main__ {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  grid-column-gap: 25px;
  grid-row-gap: 50px;
}

5. 调整条码容器样式避免溢出 #

去掉内联负margin，直接写计算后的宽度值，同时设置溢出隐藏确保内容不超出容器：

<div class="pagebreak">
  <div style="width: 38mm; height:25mm; text-align:center; overflow:hidden;">
    <!-- 条码内容 -->
  </div>
</div>

完整修改后的代码示例 #

<style>
  .main__ {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    grid-column-gap: 25px;
    grid-row-gap: 50px;
  }

  @media print {
    @page {
      margin: 0;
    }

    body * {
      display: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .main__, .main__ * {
      display: inherit !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .pagebreak {
      page-break-inside: avoid !important;
    }

    .pagebreak > div {
      width: 38mm;
      height: 25mm;
      text-align: center;
      overflow: hidden;
    }
  }
</style>

<div>
  <section class="content pt-3">
    <div class="row">
      <div>
        <div class="cards">
          <div class="main__">
            @foreach ($barcodes as $barcode)
              @for ($i = 0; $i < $barcode->product_quantity; $i++)
                <div class="pagebreak">
                  <div>
                    <small style="font-size:20px; font-weight:bold">VS Mart</small>
                    <div style="text-align:left; margin-left:15px; margin-bottom:8px;">
                      {!! DNS1D::getBarcodeSVG($barcode->barcode, 'CODABAR', 2, 32, 'black', true) !!}
                    </div>
                    <span style="text-align:left; margin-left:10px; font-size:20px; font-weight:bold">
                      {{ substr($barcode->english_name, 0, 27) }}..
                    </span>
                    <br>
                    <span style="text-align:left; font-size:14.5px; font-weight:bold">
                      MRP : {{ $barcode->mrp_price }}
                    </span>
                    <br>
                    <span style="font-size:16px; font-weight:bold">
                      <strong style="font-weight: 900">Sale Price :</strong> 
                      <span style="font-size: 15px">{{ $barcode->sale_price }}</span>
                    </span>
                  </div>
                </div>
              @endfor
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

内容的提问来源于stack exchange，提问作者pratik tilekar