TextBlock with multiple <Run> spacing

Question

Given a formatted text block in Windows Phone 7.1 project:

<StackPanel Orientation="Horizontal">
    <TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8">
            <Run Text="total length "/>
            <Run Text="{Binding TotalHours}" FontSize="48"/>
            <Run Text="h "/>
            <Run Text=":" FontSize="48"/>
            <Run Text="{Binding TotalMinutes}" FontSize="48"/>
            <Run Text="m "/>
    </TextBlock>
</StackPanel>

It is being previewed correctly in VS designer:

It is already looking not the way I want in Blend:

It looks just as in Blend (good job Blend team) in emulator and a real device.

What adds those spaces before and after big 8 and 45?

How can I force my layout to look correctly (like in VS designer)?

Answer 1

if you write all your Runs in the same line, the empty space will go away. Basically a new line here is one empty space on the UI.

<TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8"><Run Text="total length "/><Run Text="{Binding TotalHours}" FontSize="48"/><Run Text="h "/><Run Text=":" FontSize="48"/><Run Text="{Binding TotalMinutes}" FontSize="48"/><Run Text="m "/></TextBlock>