Silverlight: Why is there space between these two elements?

Question

I'm using Silverlight 4 to develop a Windows Phone app. I have a control defined by the following XAML:

<Grid x:Name="LayoutRoot" Background="Transparent" Margin="0,0,0,20">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image x:Name="Thumbnail" Grid.Column="0" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" />

    <!-- sometimes there's a hanging word in the headline that looks a bit awkward -->
    <TextBlock x:Name="Headline" Grid.Column="1" Grid.Row="0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" FontSize="23.333" VerticalAlignment="Top" />
    <TextBlock x:Name="Teaser" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}"  TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/>
</Grid>

For some reason, there's a space between Headline and Teaser. Removing the PhoneAccentStyle doesn't help.

Why could this be? There's no margin or padding defined for those two elements. The first grid row's height is defined to be Auto. Doesn't that mean that it will only be as large as the content within it?

What am I doing wrong here?

Answer 1

I think that there is no space between the two TextBlocks, but between the actual letters and the border of the TextBlock. Try to compare your layout with two similar TextBlocks inside a StackPanel, it should be the same.

The TextBlock reserves space for all kinds of characters with their elevation and descent. The space you see comes from there.