如何在xhtml2pdf中为同行内联图片添加间距？

使用xhtml2pdf从Django的DetailView生成PDF时，在HTML模板中循环渲染图片并希望它们显示在同一行。尝试为图片设置padding、margin等间距样式时，这些样式在inline显示模式下无效，仅当图片分行时才生效；但相同样式在网页端可正常工作。查阅xhtml2pdf文档得知，图片无法放在段落内，会被渲染为独立段落。现需在保持图片同行的前提下，实现图片间的间距设置。

HTML模板循环代码 #

<div>
{% for client in product.client.all %}
    <img src="{% thumbnail client.client_logo 125x100 upscale %}" alt="{{client.title}}" class="client-logos">
{% endfor %}
</div>

utils.py代码 #

def export_to_pdf(request, slug):
  product = get_object_or_404(Product, slug=slug, status=1)
  template_path = 'card_pdf_template.html'
  teams = Team.objects.filter(product__slug=slug)
  context = {'product': product, 'teams': teams}
  response = HttpResponse(content_type='application/pdf')
  response['Content-Disposition'] = 'filename={product}.pdf'.format(product=product)
  template = get_template(template_path)
  html = template.render(context)
  # 创建PDF
  pisa_status = pisa.CreatePDF(
     html, dest=response)
  if pisa_status.err:
     return HttpResponse('生成出错 <pre>' + html + '</pre>')
  return response

针对xhtml2pdf的渲染特性，以下几种方法可实现图片同行且添加间距：

方法1：使用浮动布局 #

xhtml2pdf对float属性支持较好，通过给图片设置浮动，结合父容器清除浮动，既能让图片同行，又能正常识别margin样式。

修改后的代码 #

CSS样式：

.client-logos {
    float: left;
    margin-right: 15px; /* 设置图片右侧间距 */
    margin-bottom: 10px; /* 防止换行时图片重叠 */
}
.client-container::after {
    content: "";
    display: table;
    clear: both;
}

HTML模板：

<div class="client-container">
{% for client in product.client.all %}
    <img src="{% thumbnail client.client_logo 125x100 upscale %}" alt="{{client.title}}" class="client-logos">
{% endfor %}
</div>

方法2：使用inline-block结合父容器字体重置 #

利用inline-block让图片同行，通过父容器设置font-size:0消除inline-block元素间的默认空白间距，再给图片设置margin控制自定义间距。

修改后的代码 #

CSS样式：

.client-container {
    font-size: 0; /* 消除inline-block元素间默认空白 */
}
.client-logos {
    display: inline-block;
    font-size: 16px; /* 恢复字体大小，不影响图片渲染 */
    margin: 0 10px; /* 设置左右间距 */
}

HTML模板：

<div class="client-container">
{% for client in product.client.all %}
    <img src="{% thumbnail client.client_logo 125x100 upscale %}" alt="{{client.title}}" class="client-logos">
{% endfor %}
</div>

方法3：使用表格布局 #

xhtml2pdf对表格的渲染支持非常稳定，将每个图片放入表格单元格中，通过单元格的padding或表格的cellpadding属性控制间距，确保图片同行且间距生效。

修改后的代码 #

方式A：使用表格属性直接设置

<table cellpadding="10" cellspacing="0">
    <tr>
        {% for client in product.client.all %}
        <td>
            <img src="{% thumbnail client.client_logo 125x100 upscale %}" alt="{{client.title}}" class="client-logos">
        </td>
        {% endfor %}
    </tr>
</table>

方式B：使用CSS控制单元格间距

CSS样式：

.client-table td {
    padding-right: 15px; /* 设置单元格右侧间距 */
}

HTML模板：

<table class="client-table" cellspacing="0">
    <tr>
        {% for client in product.client.all %}
        <td>
            <img src="{% thumbnail client.client_logo 125x100 upscale %}" alt="{{client.title}}" class="client-logos">
        </td>
        {% endfor %}
    </tr>
</table>

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