I would like to come up with a solution for the following issue:

Say you have a tab that renders the terminal, say it's 300x200. Now if we put the terminal into that tab, we can either make the terminal container to fill it 100%, but in that case the terminal text will touch the edges of the tab at the left, right, top and bottom, which might look weird in some situations. So an easy solution would be to add a 5px margin to the tab container, which does the job, but now you have the viewport scrollbar drawn at a weird position. I think this problem cannot be solved through css (correct me if I'm wrong) because the viewport has to be made aware of the margin to still work in sync. I would therefore propose to make the margin (or better call it padding) configurable through a config option, and then make xterm aware of it:

// 5px padding to all sides
term.setOption('padding', 5);

// individual paddings
term.setOption('padding', {
  top: 5, 
  left: 0,
  right: 10,
  bottom: 5
});

The problem in pictures

Fit the tab

5px margin to the tab, weird looking scrollbar

5px margin, but scrollbar matching the tab container