余白とスペースMargin and Padding

余白と余白のプロパティは、要素がユーザーインターフェイスに表示されるときのレイアウト動作を制御します。この記事では、2つのプロパティの違いとその設定方法について説明します。The Margin and Padding properties control layout behavior when an element is rendered in the user interface. This article demonstrates the difference between the two properties, and how to set them.

概要Overview

余白と埋め込みは、関連するレイアウトの概念です。Margin and padding are related layout concepts:

  • プロパティMarginは、要素とそれに隣接する要素との距離を表し、要素のレンダリング位置と、その隣接する描画位置を制御するために使用されます。The Margin property represents the distance between an element and its adjacent elements, and is used to control the element's rendering position, and the rendering position of its neighbors. Marginレイアウトおよびビュークラスに値を指定できます。Margin values can be specified on layout and view classes.
  • プロパティPaddingは、要素とその子要素間の距離を表し、コントロールを独自のコンテンツから分離するために使用されます。The Padding property represents the distance between an element and its child elements, and is used to separate the control from its own content. Paddingレイアウトクラスで値を指定できます。Padding values can be specified on layout classes.

次の図は、2つの概念を示しています。The following diagram illustrates the two concepts:

余白とパディングの概念![(margin-and-padding-images/margins-and-padding-sml.png " ")]

Margin値は加法です。Note that Margin values are additive. したがって、2つの隣接する要素が20ピクセルの余白を指定すると、要素間の距離は40ピクセルになります。Therefore, if two adjacent elements specify a margin of 20 pixels, the distance between the elements will be 40 pixels. さらに、余白と余白は両方とも適用されるときに追加されます。これは、要素とコンテンツとの間の距離が余白と埋め込みであることを示します。In addition, margin and padding are additive when both are applied, in that the distance between an element and any content will be the margin plus padding.

太さの指定Specifying a Thickness

プロパティとプロパティは両方とPaddingThickness型です。 MarginThe Margin and Padding properties are both of type Thickness. 構造体を作成する場合、 Thickness次の3つの可能性があります。There are three possibilities when creating a Thickness structure:

  • 1つThicknessの均一な値で定義された構造体を作成します。Create a Thickness structure defined by a single uniform value. 要素の左、上、右、および下側に1つの値が適用されます。The single value is applied to the left, top, right, and bottom sides of the element.
  • 水平およびThickness垂直の値で定義された構造体を作成します。Create a Thickness structure defined by horizontal and vertical values. 水平値は、要素の左右左右に対称的に適用されます。垂直方向の値は、要素の上下左右に対称的に適用されます。The horizontal value is symmetrically applied to the left and right sides of the element, with the vertical value being symmetrically applied to the top and bottom sides of the element.
  • 要素のThickness左、上、右、および下側に適用される4つの個別の値によって定義される構造体を作成します。Create a Thickness structure defined by four distinct values that are applied to the left, top, right, and bottom sides of the element.

次の XAML コード例は、3つのすべての可能性を示しています。The following XAML code example shows all three possibilities:

<StackLayout Padding="0,20,0,0">
  <Label Text="Xamarin.Forms" Margin="20" />
  <Label Text="Xamarin.iOS" Margin="10, 15" />
  <Label Text="Xamarin.Android" Margin="0, 20, 15, 5" />
</StackLayout>

これと同じ C# コードの例は次のとおりです。The equivalent C# code is shown in the following code example:

var stackLayout = new StackLayout {
  Padding = new Thickness(0,20,0,0),
  Children = {
    new Label { Text = "Xamarin.Forms", Margin = new Thickness (20) },
    new Label { Text = "Xamarin.iOS", Margin = new Thickness (10, 25) },
    new Label { Text = "Xamarin.Android", Margin = new Thickness (0, 20, 15, 5) }
  }
};

注意

Thickness値には負の値を指定できます。通常は、コンテンツをクリップまたは過剰に描画します。Thickness values can be negative, which typically clips or overdraws the content.

SummarySummary

この記事では、プロパティとMargin Paddingプロパティの違いと、プロパティの設定方法について説明します。This article demonstrated the difference between the Margin and Padding properties, and how to set them. プロパティは、ユーザーインターフェイスで要素がレンダリングされるときのレイアウト動作を制御します。The properties control layout behavior when an element is rendered in the user interface.