div scaled to zero width still taking up space

Question

The div in the middle here is not shown, but it is still taking up the width it would have taken up if the width was not scaled. How can I have the middle div not take up any space but still use the scale transformation? I do not want to use display: none;

<style>
div {
  display: inline-block;
  font-size: 3em;
}
</style>

<div>Your</div>
<div style='transform: scale(0, 1);'>&nbsp;potential</div>
<div>&nbsp;house</div>

My ultimate goal is to use this with skrollr and gradually expand the div in the middle upon scrolling down:

<style>
div {
  display: inline-block;
  font-size: 3em;
}
</style>

<div style='position: fixed;'>
  <div>Your</div>
  <div data-0='transform: scale(0, 1);' data-200='transform: scale(1, 1);'>&nbsp;potential</div>
  <div>&nbsp;house</div>
</div>

<script type="text/javascript" src="https://cdn.rawgit.com/Prinzhorn/skrollr/0.6.30/src/skrollr.js"></script>

<script type="text/javascript">
var s = skrollr.init();
</script>

Using font-size instead of transform also expands the text in, but it's not the effect I want to achieve.

inline results in the div in the middle to always be displayed.

Answer 1

Give font-size:0 or width:0 to remove space.

<style>
div {
  display: inline-block;
  font-size: 3em;
}
</style>

<div>Your</div>
<div style='transform: scale(0, 1);font-size:0'>&nbsp;potential</div>
<div>&nbsp;house</div>