If I want to have dl where dt and dd are inline that seems impossible with latest build of Prince for MAC OSX.

Usually, this is the most common HTML/CSS to write:

<dl>
  <dt>Term 1:</dt>
  <dd>Data 1</dd>
  <dt>Term 2:</dt>
  <dd>Data 2</dd>
  <dt>Term 3:</dt>
  <dd>Data 3</dd>
  <dt>Term 4:</dt>
  <dd>Data 4</dd>
</dl>

dt, dd {
  float: left;
}

dt {
  clear: both;
}

This will make the structure as it should work, but the margin between each dt and dd in each successive pair will be twice bigger than before for no apparent reason. HTML is of course correct.

I even tried other solution:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

This one works as intended, but for some reason, some font rules that I put on dt will just be ignored, like font-size, text-transformation, font-weight.

As attachment there is how HTML looks in both cases and how PDF renders in both cases.

1. Screen Shot 2018-04-19 at 12.56.28 PM.png‎ 41.8 kB ‎
   HTML
2. Screen Shot 2018-04-19 at 12.56.36 PM.png‎ 42.0 kB ‎
   PDF in first case with floats
3. Screen Shot 2018-04-19 at 12.56.45 PM.png‎ 54.6 kB ‎
   PDF in second case with inline

You may want to zero the margins on dd elements, perhaps?

I've reset margins and paddings on all elements dl, dt, dd, I just added small margin-left on dd to move it a bit from dt, but the problem persists, that margin is cascaded with every next element like the image shows. I also tried leaving all margins and paddings to 0 and in that case most of my elements were rendered correctly, but some were (randomly) moved away to the right. Very strange. I also tried adding display which would sometimes alter the way it renders (wrongly), but as far as HTML goes, when you float an element it should ignore display and compute it to block (I believe that is by specification).

Anyways I managed to get it almost right after testing a bit more, this is my code that "works" for now:

  dt, dd {
      display: inline;
      font-size: 6pt;
      line-height: 7pt;
  }

  dt {
    text-transform: uppercase;
  }

  dd {
    font-weight: 300;
    margin-left: 3pt;

   dd:after {
      display: block;
      content: "";
  }

The problem still exists, there is no way to change vertical margin/padding between pairs. Of course, by specification, on inline elements vertical margin/padding should be ignored, but in my example, line-height is also ignored. So there seems no way to change vertical spacing between pairs with this example.

I still feel first example code should've worked, seems like there are some issues with clearing floated elements. That example also alows me to change spacing between pairs, if it could only render correctly.

Furthermore, after I moved line-height to dl element instead of having it for dt and dd it worked. Now I have proper styling, but the bad thing is that this feels like a fix and not a proper solution like it would be with float and clear.

I'm always wary of floats, as they aren't exactly the simplest thing in CSS. Another option is to just run in the dt element:

dt { display: run-in; }

dt::after { content: ' ' }