Share via

Using Margins, Padding, and Spacing

  • Article

Margins and padding are used to add space around and inside view items. Margins and padding are always available regardless of the layout type, and are configured by setting pixel values for Left, Top, Right, and Bottom.

  • Margins add spacing around the outside of a view item, creating more space between it and its siblings and parent. Negative margins reduce this space, and can be used to force overlapping.
  • Padding adds space inside of the view item, creating more space between the boundaries of the view item and its children.

Spacing is used with FlowLayout, and is used to add space between child elements in a vertical or horizontal flow. Spacing is a good way to create space in text, for example.

The following example shows the effect of setting margins, padding, and spacing.

An example that shows different settings for margins and padding.

<Content>
  <ColorFill Content="Blue" >
    <Layout>
      <!-- Spacing is used to create distance between the child elements that follow. -->
      <FlowLayout Orientation="Vertical" ItemAlignment="Center" Spacing="30,30"/>
    </Layout>

    <Children>

      <!-- No margins and no padding. -->
      <ColorFill Content="Goldenrod" >
        <Children>
          <ColorFill Content="White" >
            <Layout>
              <FlowLayout Orientation="Vertical" ItemAlignment="Center"/>
            </Layout>
            <Children>
              <Text Content="No margins, no padding" Color="Firebrick" Font="Tahoma,12"/>
            </Children>
          </ColorFill>
        </Children>
      </ColorFill>

      <!-- Margins and no padding. -->
      <ColorFill Content="Goldenrod" >
        <Children>
          <ColorFill Content="White" Margins="5,5,5,5" Padding="0,0,0,0"  >
            <Layout>
              <FlowLayout Orientation="Vertical" ItemAlignment="Center"/>
            </Layout>
            <Children>
              <Text Content="Margins, no padding" Color="Firebrick"  Font="Tahoma,12"/>
            </Children>
          </ColorFill>
        </Children>
      </ColorFill>

      <!-- No margins and some padding. -->
      <ColorFill Content="Goldenrod" >
        <Children>
          <ColorFill Content="White" Margins="0,0,0,0" Padding="5,5,5,5"  >
            <Layout>
              <FlowLayout Orientation="Vertical" ItemAlignment="Center" />
            </Layout>
            <Children>
              <Text Content="Padding, no margins" Color="Firebrick" Font="Tahoma,12" />
            </Children>
          </ColorFill>
        </Children>
      </ColorFill>

      <!-- Margins and padding. -->
      <ColorFill Content="Goldenrod" >
        <Children>
          <ColorFill Content="White"  Margins="5,5,5,5" Padding="5,5,5,5">
            <Layout>
              <FlowLayout Orientation="Vertical" ItemAlignment="Center" />
            </Layout>
            <Children>
              <Text Content="Margins and padding"  Color="Firebrick" Font="Tahoma,12" />
            </Children>
          </ColorFill>
        </Children>
      </ColorFill>

      <!-- Negative margins and no padding. -->
      <ColorFill Content="Goldenrod" >
        <Children>
          <ColorFill Content="White" Margins="-5,-5,-5,-5" Padding="0,0,0,0" >
            <Layout>
              <FlowLayout Orientation="Vertical" ItemAlignment="Center" />
            </Layout>
            <Children>
              <Text Content="Neg margins, no padding" Color="Firebrick" Font="Tahoma,12" />
            </Children>
          </ColorFill>
        </Children>
      </ColorFill>

    </Children>
  </ColorFill>
</Content>

Sample Explorer

  • Layout > Margins and Padding

See Also