Stacklayout spacing=0 still showing space. Help!

Hi all,

I've a xaml page with a top banner and bottom banner using stacklayout but there is a space between the banner and main(middle) stacklayout.
How do i get rid of that space (Aqua line because of the Aqua background) on the top and bottom? is this a bug?

this is my code.

  <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Aqua">
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Start" BackgroundColor="Gray" Padding="5" Spacing="0">
      <l:NotoSansRegularLabel Text="Test" FontSize="17" FontAttributes="Bold" TextColor="White" XAlign="Center"/>
    </StackLayout>

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Teal" Padding="0" Spacing="0">
      <Label x:Name="txt_test" Text="Testing 123" VerticalOptions="Center" HorizontalOptions="Center" TextColor="Black" />
    </StackLayout>

    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="Gray" Padding="5" Spacing="0">
      <l:NotoSansRegularLabel Text="Test" FontSize="17" FontAttributes="Bold" TextColor="White" XAlign="Center"/>
    </StackLayout>
  </StackLayout>

Please help. Thanks.