Forum Bugs

Can't set left/right margin to zero on inline block.

David J Prokopetz
I have the following in my XML file:

<cards>
  <card>Contents of card 1.</card>
  <card>Contents of card 2.</card>
  <card>Contents of card 3.</card>
  <card>Contents of card 4.</card>
  <card>Contents of card 5.</card>
  <card>Contents of card 6.</card>
  <card>Contents of card 7.</card>
  <card>Contents of card 8.</card>
</cards>


... and the following in my CSS:

@page cardpage
{
  size: US-Letter landscape;
  margin: 1.0cm;
}

cards
{
  page: cardpage;
}

card
{
  display: inline-block;
  margin: 0.0cm;
  padding: 0.0cm;
  
  border: solid 1pt black;
  border-radius: 0.5cm;

  width: 6.3cm;
  height: 8.8cm;
}


When I render it using Prince, the blocks come out with a 0.1cm horizontal gap between them. I can confirm that it's exactly 0.1cm, because if I set the left and right margins to negative 0.05cm (that is, -0.05cm), they line up perfectly.

(There's no problem with the top and bottom margins, though.)

Where's the extra millimetre coming from?
mikeday
The gap between the cards (nice layout, by the way!) is caused by the whitespace between the <card> elements. If you remove the whitespace, the gap will disappear. If you think about it, each inline-block is like a letter "X", so two inline blocks with a space between them is like "X X"; the space causes the gap.

You might find that if you remove the space then you have trouble breaking the cards over multiple lines. You could always add a zero-width space character (&#x200B;) after each card.

Alternatively, you could turn each page into a table with each card as a cell, or you could just use a negative margin on the cards to eat up the extra space.
David J Prokopetz
I was afraid of that. Getting rid of the whitespace means getting rid of the line breaks, too - and an XML file with no linebreaks is going to be a real pain to edit.

I tried the table/table-cell thing, too, and while that fixes up the margins, there doesn't seem to be any way to get the cards to break across multiple lines that way.

I don't suppose there's any way to just collapse the whitespace in the cards element?

EDIT: Never mind, I just answered my own question - set the font-size property of the parent element to zero. Since Prince doesn't impose minimum font dimensions (some UIs do), the whitespace vanishes.

Thanks. :)